Empty HTML5 page still overflows and trigger scroll bars on mobile

问题

What am I expecting is a page that is not overflowing since there is no content and hence have no need to scroll. But what I am getting is a page that is empty but it still scrolls, and isn't just a cosmetic issue of the scroll bars appearing on the touch event. It actually offsets the background in the view port.

I've been trying everything that Google has thrown at me to make sure the width and height of the body block is the size of the viewport and no greater. I've also tried over-flow: hidden to no avail. I've also tried to set the body size to be smaller to the viewport and still no luck.

 <!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>

I also wrote some javascript to report to me while viewing this on chrome for android the viewport width through document.documentElement.clientWidth, and low and behold, document.documentElement.clientWidth equals the width of the body element as indicated through chrome's inspector. I even took this a step further and executed this: document.getElementsByTagName('body')[0].style.width = (document.documentElement.clientWidth-100)+"px"; and i can still scroll.

this is really rustling my jimmies.

Things I've tried:

height-min: 100%, width-min: 100%
overflow-x and overflow-y to hidden

回答1:

Try removing 'width=device-width' from your declaration. I had the exact same problem you describe, removing 'width=device-width' fixed it for me.

来源：https://stackoverflow.com/questions/14195740/empty-html5-page-still-overflows-and-trigger-scroll-bars-on-mobile