如何通过响应式网页设计避免移动网络上的水平滚动？

Question

我有一个适应性强的网络应用程序.为了避免水平滚动,我编写了以下CSS代码:

html {
    overflow-x: hidden; }

这适用于桌面,但不适用于移动设备.如果我在移动设备上显示应用程序,该应用程序适应性很好.问题是当我从右向左滚动时.页面移动了一下.我希望页面不会水平移动.

编辑:

该页面不会在所有移动设备上滚动.我已经在具有相同Android版本的两台设备上尝试过,它只在其中一台设备上滚动.

Answer 1

检查所有填充.如果向宽度设置为100%的内容添加填充,则它将超出父级.

这里显示 http://jsfiddle.net/wzZ3W/

码

<div id="fillX">
    <div id="childXFill">
    </div>
</div>

#fillX
{
    background:red;
    width:100%;
    opacity:0.5;
}

#childXFill
{
    background:blue;
    width:100%;
    padding:10px;
    opacity:0.5;
}

还要检查跨越页面的元素的负向左边距和右边距.例如http://jsfiddle.net/s7zrukj2/2/

另外,使用CSS重置.

如果你不想使用,overflow: hidden你应该把它放在身体元素上.像这样

body, html { overflow-x:hidden; }

虽然某些内容溢出的事实表明您的响应式设计出现错误,但您应该尝试修复它,以防止移动用户看不到某些内容.

Answer 2

您可以将其放在控制台中以概述所有块/div。然后您可以找到容器外的那个。

[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})

Answer 3

如果不适用于移动设备，则应使用以下元标记：

<meta name="viewport" content="width=device-width, initial-scale = 1.0, 
maximum-scale=1.0, user-scalable=no" /> 

这会将宽度设置为设备宽度。