如何使用响应式网页设计避免移动网页上的水平滚动？

Question

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

 html {
    overflow-x: hidden; }

这在桌面上运行良好，但在移动设备上运行不佳。如果我在移动设备上显示该应用程序，该应用程序可以很好地适应。问题是当我从右向左滚动时。页面移动了一点。我希望页面不水平移动。

编辑：

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

原文由 vicenrele 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 元素上。像这样

body, html { overflow-x:hidden; }

尽管某些东西溢出的事实表明您的响应式设计中存在错误，您应该尝试修复它以防止移动用户看不到某些东西。

原文由 Jonathan 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

你可以把它放在你的控制台中来概述所有块/div。然后你可以找到容器外的那个。

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

原文由 BaptisteGillard 发布，翻译遵循 CC BY-SA 4.0 许可协议