禁用移动网页的水平滚动

Question

我在我的网站上的某些手机上出现了水平滚动条的问题。 我尝试使用overflow-x: hidden，但它不起作用。 宽度为自适应，因此它将自动调整Web以适应屏幕大小。在黑莓、诺基亚E52和Windows Mobile中查看时，除了其他所有手机都没问题，水平滚动条会出现。

有什么建议吗？

- Sylph

---

看起来横幅图像会导致某些手机需要整个网站水平滚动。有没有办法使横幅图片自动调整大小？ - Sylph

Answer 1

只需添加以下 CSS：

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

- pollux1er

---

这一个是唯一有效的！谢谢！ - ayunami2000

好的，最佳答案是将其放入您的媒体查询中，以避免在移动设备上出现溢出，当然，还要考虑媒体视口。 - Vincent Decaux

这解决了新现实中的大部分主要问题。因为我在我的布局中遇到的问题是它会在远离视图的奇怪位置扭曲滚动。现在，它强制滚动x始终在框架内。不会阻止缩放，但至少提供了可以接受的用户体验。 - Mark Odey

这应该被标记为正确答案。感谢分享，@KyleMit。 - Julius Depulla

@JuliusDepulla，澄清一下 - 我刚刚进行了编辑；/u/pollux1er是最初发布的人。也许/u/slyph多年后可以接受一个；与此同时，我会增加一些赏金。 - KyleMit

Answer 2

我在stackoverflow上找到了这个答案（链接），对我来说非常完美：

在style中使用此代码

在style中使用此代码

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

在头部标签中使用此代码

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

- Klaas van der Weij

---

如果您正在制作一个应用程序并通过Webview查看它，添加以下代码将有助于防止左右滚动。overflow-x: hidden; - Mikeys4u

我建议彻底测试。在某些情况下，使用 overflow: hidden; 会将您的页面锁定在顶部，无法向下滚动。正如 Mikeys4u 所说，通常最好使用 overflow-x: hidden;。 - karolus

我必须将CSS应用于html元素，这样它才能正常工作，而且我不需要meta标签。 - Donald Duck

这段代码在我的Angular应用程序中仍然显示水平滚动条。 - Franco

Answer 3

就我而言，在黑莓手机上，视口（viewport）元标记实际上导致了水平滚动问题。

我从视口标记中删除了 content="initial-scale=1.0; maximum-scale=1.0; ，并解决了该问题。下面是我的当前视口标记：

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

- James Lawruk

---

最佳答案是因为它能够正常工作并且让粘性定位也能够正常工作！ - nonozor

如果您想让您的网站对所有人都可访问，那么禁用缩放并不是一个好主意。请阅读：https://adrianroselli.com/2015/10/dont-disable-zoom.html - Kasper Kamperman

Answer 4

试试这段代码，overflow 属性可以帮助移除滚动条。你也可以将它用于任何需要滚动的 div 元素。

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

- Salman Abir

Answer 5

这段代码可以在移动设备的横屏和竖屏模式下正常显示。其中，<meta name="viewport" content="width=device-width, initial-scale = 0.86, maximum-scale=3.0, minimum-scale=0.86"> 是关键代码，它保留了HTML标签并设置了视口的宽度、初始缩放比例以及最小/最大缩放比例。

- Ronnie Royston

---

这里的其他解决方案对我无效。这个对我有效。但是，我必须将所有的<p>元素替换为<div>元素，以防止移动浏览器提示“显示简化视图”对话框。 - Chong Lip Phang

Answer 6

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

请看我的帖子这里。

- samael

Answer 7

我使用以下代码使用户仍然能够进行缩放：

```html

我使用以下代码使用户仍然能够进行缩放：

```

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

- Michael Spiss

Answer 8

请试试这样做

CSS

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

- Ranjith v

---

完美，这解决了我的问题。 - Danyial Shahid Ali

Answer 9

在这种情况下，编辑您的meta viewport。

尝试使用以下代码：

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

- Sultan Ahmed

---

目前你的回答不够清晰，请[编辑]以添加更多细节，帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何编写好答案的更多信息。 - Community

Answer 10

以下是在我的Angular应用程序中完美运行的代码，它不会在桌面模式下显示2个垂直滚动条，并且不会在移动模式下显示水平滚动条，这是尝试两个最高票答案的结果。

html,
body {
    overflow-x: hidden;
    width: 100%;
    height: 100%;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
}

- Franco