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

Question

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

有什么建议？谢谢!

Answer 1

只需添加此CSS:

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

Answer 2

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

Answer 3

Try this code,overflow will help to remove scrollbar.You can use it also for any div which is scrolling.

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

Answer 4

对我来说,视口元标记实际上在黑莓上引起了水平滚动问题.

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

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

Answer 5

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

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