在移动网络上禁用水平滚动答案

【问题标题】：disable horizontal scroll on mobile web在移动网络上禁用水平滚动
【发布时间】：2011-05-10 16:30:21
【问题描述】：

我遇到了一个问题，即我的网站在某些手机上出现水平滚动。我试图输入overflow-x: hidden，但它不起作用。宽度是自动的，因此它实际上会自动调整网页大小以适应屏幕大小。除了黑莓、诺基亚 e52 和 Windows mobile 中查看时，其他所有手机都可以，会出现水平滚动。

有什么建议吗？

【问题讨论】：

横幅图片似乎使整个网站需要针对某些手机进行水平滚动。无论如何要让横幅图像自动调整大小？

标签： css mobile-website

【解决方案1】：

只需添加这个 CSS：

html, body {
  overflow-x: hidden;
}
body {
  position: relative
}

【讨论】：

只有这个对我有用！谢谢！
是的最佳答案，将其放入您的媒体查询中以避免在移动设备上溢出，当然还有媒体视口。
这解决了新现实的大部分主要问题。正如我在布局上所面临的那样，它会在远离视图的奇怪位置滚动滚动。这现在强制滚动 x 始终在框架中。不阻止放大，但至少提供好的用户体验。
这应该被标记为正确答案。感谢分享@KyleMit
@JuliusDepulla，明确一点-我刚刚进行了编辑； /u/pollux1er 是最初发布它的人。也许 /u/slyph 这么多年后还能接受一个；同时，我会赏金一点

【解决方案2】：

我找到了这个答案over here on stackoverflow，它非常适合我：

在风格中使用这个

body {
    overflow-x: hidden;
    width: 100%;
}

在head标签中使用这个

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />

如果你的身体有填充，我会稍微添加一点（以防止设备缩放到身体内容框，因此仍然添加水平滚动条）：

body {
    overflow-x: hidden;
    width: 100%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

【讨论】：

如果您制作一个应用程序并通过 web 视图查看它，添加它只是为了阻止它从左到右滚动，这很有帮助。溢出-x：隐藏；
我会添加到彻底测试。在某些情况下，使用overflow: hidden; 会将您的页面锁定在顶部，无法向下滚动。正如Mikeys4u 所说，通常最好使用overflow-x: hidden;。
我必须将 CSS 应用到 html 元素才能使其正常工作，而且我不需要 meta 标签。

【解决方案3】：

对我来说，视口元标记实际上导致黑莓手机出现水平滚动问题。

我从视口标签中删除了content="initial-scale=1.0; maximum-scale=1.0;，它解决了这个问题。以下是我当前的视口标签：

<meta name="viewport" content="user-scalable=0;"/>

【讨论】：

最佳答案，因为它有效并且让sticky-position也有效！

【解决方案4】：

试试这个代码，溢出将有助于删除滚动条。你也可以将它用于任何正在滚动的 div。

html, body {
   overflow-x: hidden;
 }
body {
   width:100%;
 }

【讨论】：

【解决方案5】：

这适用于所有移动设备的纵向和横向模式。

<meta name="viewport" content="width=device-width, initial-scale = 0.86, maximum-scale=3.0, minimum-scale=0.86">

【讨论】：

这里的一些其他解决方案对我不起作用。这对我有用。但是，我必须将所有
元素替换为

元素，以防止移动浏览器提示“显示简化视图”对话框。

【解决方案6】：

我知道这是一个老问题，但值得注意的是 BlackBerry 不支持 overflow-x 或 overflow-y。

看我的帖子here

【讨论】：

【解决方案7】：

我使用它来让用户仍然能够放大和缩小：

<meta name="viewport" content="width=device-width;" />

【讨论】：

【解决方案8】：

这样试试

css

*{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -msbox-sizing: border-box;
}
body{
   overflow-x: hidden;
}
img{
   max-width:100%;
}

【讨论】：

完美解决了我的问题

【解决方案9】：

只需应用宽度：100%；到身体

【讨论】：

【解决方案10】：

根据盒子尺寸，100% 的宽度可能并不总是最好的选择。我会建议

 width:100vw;
 overflow-x: scroll;

这可以应用在正文、html 的上下文中，正如建议的那样，或者您可以将有问题的内容包装在应用了这些设置的 div 中。

【讨论】：

【解决方案11】：

对于我的项目，一切都保持原样，只有添加这个才有效：html{ overflow-x: hidden;} （问题出在 android 8 手机浏览器中）

【讨论】：

【解决方案12】：

我遇到了同样的问题。添加 maximum-scale=1 修复它：

旧：<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

新：<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

附：我也一直在值之间使用逗号。但它似乎也适用于分号。

【讨论】：