消息关闭
    暂无新消息!

一个有点挑战性的css问题

问题作者 : Levet2017-07-07发布

移动web设置页面高度100vh,在一些浏览器里是正常显示的,但是在某些可以全屏的移动浏览器,比如手机端的chrome,估计100vhheight:100%都是包括上边地址栏的高度的,所以设置了100vh还是可以拖动页面然后隐藏标题栏然后显示的才是全屏的?我想要它不能拖动而且显示的是全部内容的(用vue写的单页应用,设置了背景等内容,希望能获得app的体验)。

曾经尝试过将htmlbody都设置了height:100,overflow:hidden,然后页面div设置height:100%,但是发现它的确是不能滚动了,但是发现页面下面一部分被隐藏了...

有没有什么解决方法吗?


7个回答

︿ 2

没有理解错的话,
就是你希望不管手机屏幕多大,
你都想让你的页面在单页中显示完整?

思考了一下没有太好的解决方案,
可以在加载完成后根据宽高把页面进行 scale 缩放来塞满屏幕。

︿ 1

但是发现页面下面一部分被隐藏了

溢出了不滚动当然是隐藏了,不然还能怎样。排版的时候需要留够位置。

︿ 1

你的意思是又不想内容超出屏幕,又不想出现滚动条,这样只能减少你的内容或者在手机端减小你的字体大小,另外手机端的浏览器本来就是滚动上移后就会隐藏地址栏,就简单的JS与css无法控制浏览器是否全屏,因此最好的解决办法就是将网页打包成APP,否则就只能等哪天手机端浏览器都不再出现地址栏了,才能实现

︿ 0

参考链接
你可以参考上面的链接,看情况是这个问题已经给相应的浏览器厂商反馈了,但是厂商拒绝承认这是个bug。。。
说这种情况是故意为之,为了解决别的bug,反正结论就是浏览器厂商不会解决这个问题。
看有个人回复说可以使用$(window).height()解决,不过就是得通过脚本动态计算了。

︿ 0

手机端想要不管多大屏幕都是一屏显示的话,那就只能针对各种屏幕大小来写样式了,因为我之前遇到过一屏显示的问题,只能用这种方法了

︿ 0

可以尝试使用fullscreen api来实现全屏幕操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="theme-color" content="#000000">
    <title>Title</title>
    <style>
        body{
            padding: 0;
            margin: 0;
            width: 100vw;
            height: 100vh;
            background-color: red;

        }
        .divBottom{
            position: absolute;
            left:0px;
            bottom:0px;
            width: 100vw;
            height: 100px;
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <div class="divBottom"></div>
    <script>
        HTMLElement.prototype.requestFullscreen=HTMLElement.prototype.requestFullscreen||HTMLElement.prototype.webkitRequestFullscreen;
        document.querySelector("body").addEventListener("click",function(){
            this.requestFullscreen();
        },false);
    </script>
</body>
</html>