空的HTML5页面仍然溢出，并在移动设备上触发滚动条 [英] 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.
我一直在尝试Google扔给我的所有东西，以确保主体块的宽度和高度是视口的大小，而不是更大.我也尝试了溢出:隐藏无济于事.我还尝试将主体尺寸设置为相对于视口较小，并且仍然没有运气.
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>
我还编写了一些JavaScript，以便在chrome上查看此报告，以便通过android.chrome通过document.documentElement.clientWidth观察到视口宽度，并观察到document.documentElement.clientWidth等于chrome所指示的body元素的宽度检查员.我什至更进一步并执行了以下操作: document.getElementsByTagName('body')[0] .style.width =(document.documentElement.clientWidth-100)+"px"; 而且我仍然可以滚动.
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.
我尝试过的事情:
- 高度最小:100％，宽度最小:100％
- overflow-x和overflow-y隐藏
推荐答案
尝试从声明中删除"width = device-width".我遇到了与您描述的问题完全相同的问题，为我删除了"width = device-width".
Try removing 'width=device-width' from your declaration. I had the exact same problem you describe, removing 'width=device-width' fixed it for me.
这篇关于空的HTML5页面仍然溢出，并在移动设备上触发滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
