如何在响应式网页设计中避免移动端出现水平滚动？

Question

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

html {
    overflow-x: hidden; }

这在桌面上很好用，但在移动设备上不行。如果我在移动设备上显示应用程序，应用程序会适应得很好。问题是当我从右向左滚动时。页面会移动一点。我希望页面不要水平移动。

编辑：

并非所有移动设备都可以滚动。我已经在两个具有相同Android版本的设备上尝试过它，只有一个设备可以滚动。

- vicenrele

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; }

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

- Jonathan

Answer 2

您可以在控制台中输入以下代码来勾勒出所有块级元素和 div 元素的轮廓。然后，您可以找到那些位于容器之外的元素。

您可以将此代码放入控制台中以勾勒出所有块级/ div 元素的轮廓。您可以找到位于容器之外的元素。

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

- BaptisteGillard

---

这启发了我使用* { outline: 1px红色实线！important; visibility: visible！important }，并发现了原因。谢谢！ - gillytech

非常棒的脚本@BaptisteGillard！在移动版网站上帮我节省了不少时间。 - Dani Amsalem

优秀的解决方案！！ - Zasha

Answer 3

如果在移动设备上出现问题，您应该使用以下标签：

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

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

- user3302919

---

除非您真的有防止用户缩放的理由（例如，您的整个页面是具有自己的缩放/捏合手势的交互式小部件），否则请不要设置“user-scalable=no”（请不要设置“用户不可缩放”）。 - user56reinstatemonica8

@user568458我只是开发小型的Web应用程序，所以绝对不希望用户缩放。你知道有多少应用程序允许你进行捏合和缩放吗？在合理范围内，几乎没有。 - Joseph Kreifels II

似乎在iOS设备上，user-scalable-no也无法在Safari上工作。 - Chukwualuka Chiama

Answer 4

您需要确保父容器的宽度不超过移动屏幕尺寸。

因此，最好为所有内容使用百分比宽度，并确保没有内容具有大于移动屏幕尺寸的固定宽度。

- Luke Robertson

---

滚动条在所有手机上都不会出现。我已经在两个版本相同的Android手机上尝试过，结果并不相同。 - vicenrele

这就是解决我的方法，使用％宽度。谢谢你，Luke！ - GTS Joe

我也遇到了同样的问题。我的一些固定元素的总宽度大于屏幕尺寸。我认为当百分比相加超过100%时，也会出现问题。 - JScarry

Answer 5

如果您使用Boostrap并遇到此问题，则以下是答案。

适用于Bootstrap用户

使用.container或.container-fluid将您的.row进行包装，这将解决该问题。

- Dexter

Answer 6

在您的HTML头部设置移动视口。

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

确保隐藏溢出部分

  body, html { overflow-x:hidden; }

- Nuno Sarmento

---

除非你确切知道自己在做什么，否则不应将user-scalable=no设置为“否”。 - gillytech

Answer 7

我是一个初学者，但我想分享我的经验，希望你会发现它有用。所以我正在使用一个有缺陷的模板制作网站，并注意到在响应式视图中，它有一个白色空间，让您向右滚动，我认为通过更改body或html的宽度和溢出来解决问题。但实际上，当您按下它的图标时弹出菜单的容器才是问题所在。换句话说，它的过渡效果是“宽度1秒内缓慢增加”，但通过这样做，当它被隐藏时，它会保留一些空白空间在右侧。所以我只是将过渡切换从宽度改为高度，虽然我不知道是否真的需要这样做，或者我只需使用“显示”即可，然后问题就解决了。希望这对你有帮助！

.opened {
    display: block;
    height: 90%;
    transition: height 1s ease-in-out;
}

.closed {
    display: none;
    height: 0px;
    transition: height 1s ease-in-out;
}

//之前使用的是''width''而不是//

- CrisEfst

Answer 8

我想分享一下我的解决方案。我尝试了包括overflow-x、给所有元素添加红色边框等在内的一切方法，仍然可以向右滚动。

首先，我通过在“检查元素”中删除容器，直到无法向右滚动为止。然后深入研究有问题的div。发现是一个隐藏的下拉div，它的可见性设置为“visible:hidden”，而display设置为“block”。我通过将其改为"display:none"来解决问题，现在一切正常。

- Richard Dev

Answer 9

除了Dexter的Bootstrap评论中关于填充的顶级答案，Bootstrap用户还应该查看各种间距实用程序/类。

下面是当前文档的链接，但您可能需要查看适用于您的Bootstrap版本的相关文档。

任何带有p-或px-的内容都可能导致水平滚动问题，即使包含在.row内。

有时pl-或pr-可以解决创建水平滚动条的px-。或者px-2可以替代px-5。

这些类使用格式{property}{sides}-{size}（xs）和{property}{sides}-{breakpoint}-{size}（sm、md、lg和xl）进行命名。

- LWRMS

Answer 10

请确保将以下标签添加到您的HTML中：

```html ```

- Peter Mwansa

---

你的回答可以通过提供更多的支持性信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的回答是否正确。你可以在帮助中心找到有关如何撰写好的回答的更多信息。 - undefined