Question

我遇到的问题是我的网站的某些手机上出现水平滚动。我试图把overflow-x：隐藏起来，但它没有用。宽度是自动的，因此它实际上会自动调整网页大小以适合屏幕大小。所有其他手机都没问题，除非在黑莓，诺基亚e52和Windows手机上观看，否则会出现水平滚动。

有什么建议吗？谢谢！

Answer 1

要将宽度设置为设备宽度，请使用以下命令：

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

Answer 2

只需添加此CSS：

{{1}}

Answer 3

我发现这个答案over here on stackoverflow对我来说非常有用：

在风格中使用

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: hidden;
    width: 100%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

Answer 4

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

我从viewport标记中删除了content="initial-scale=1.0; maximum-scale=1.0;，它修复了问题。以下是我当前的视口标记：

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

Answer 5

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

查看我的帖子here

Answer 6

我用它来让用户仍然可以放大和缩小：

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

Answer 7

这对我在纵向和横向模式下的所有移动设备上都有效。

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

Answer 8

仅施加宽度：100％；身体

Answer 9

尝试这样

css

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

Answer 10

尝试此代码，溢出将有助于删除滚动条。您也可以将其用于正在滚动的任何div。

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

Answer 11

取决于框大小的宽度100％不一定总是最佳选择。我建议

 width:100vw;
 overflow-x: scroll;

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

Answer 12

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

OLD：<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">

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

禁用移动网络上的水平滚动

12 个答案: