Question

我期待的是一个没有溢出的页面，因为没有内容，因此无需滚动。但我得到的是一个空的页面，但它仍然滚动，并不仅仅是触摸事件中出现的滚动条的装饰问题。它实际上抵消了视口中的背景。

我一直在尝试谷歌向我抛出的所有东西，以确保体积的宽度和高度是视口的大小而不是更大。我也尝试过流：隐藏无济于事。我还尝试将体型设置为较小的视口，但仍然没有运气。

 <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>mobile</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
        <style type="text/css" media="screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5)">

            body, html{
                padding: 0px;
                margin: 0px;
                border: 0px;
                min-height: 100%;
                min-width: 100%;
                max-width: 100%;
                overflow:hidden;
            }

            body{
                background-image: url(lol.gif);
            }


        </style>
    </head>

    <body>
    </body>
</html>

我还写了一些javascript来向我报告，同时通过document.documentElement.clientWidth在chrome上查看视频宽度，并且低和behold，document.documentElement.clientWidth等于通过chrome指示的body元素的宽度督察。我甚至更进了一步并执行了这个：document.getElementsByTagName('body')[0].style.width = (document.documentElement.clientWidth-100)+"px"; 我仍然可以滚动。

这真是沙沙作响。

我尝试过的事情：

height-min：100％，width-min：100％
overflow-x和overflow-y to hidden

Answer 1

尝试从声明中删除'width = device-width'。我遇到了你描述的完全相同的问题，删除'width = device-width'为我修复它。

空的HTML5页面仍然溢出并触发移动设备上的滚动条

1 个答案: