CSS 在移动网络上禁用水平滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4192277/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
disable horizontal scroll on mobile web
提问by Sylph
I'm having an issue where horizontal scrolls appear on certain phones for my site.
I tried to put overflow-x: hiddenbut it's not working.
The width is auto, so that it will actually automatically resize the web to suits the screen size. All other phones are fine except when viewed in blackberry, nokia e52, and Windows mobile, the horizontal scroll will appear.
我的网站的某些手机上出现水平滚动的问题。我试图把，overflow-x: hidden但它不工作。宽度是自动的，因此它实际上会自动调整网页的大小以适应屏幕尺寸。所有其他手机都很好，除了在黑莓、诺基亚 e52 和 Windows mobile 中查看时，会出现水平滚动条。
Any advice?
有什么建议吗？
回答by pollux1er
Simply add this CSS:
只需添加此 CSS：
html, body {
overflow-x: hidden;
}
body {
position: relative
}
回答by Klaas van der Weij
I've found this answer over here on stackoverflowwhich works perfectly for me:
我在 stackoverflow 上找到了这个答案，这对我来说非常有用：
use this in style
用这个风格
body {
overflow-x: hidden;
width: 100%;
}
Use this in head tag
在 head 标签中使用它
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
A slight addition of mine in case your body has padding (to prevent the device from scaling to the body content-box, and thus still adding a horizontal scrollbar):
如果您的身体有填充（以防止设备缩放到身体内容框，从而仍然添加水平滚动条），我会稍微添加一点：
body {
overflow-x: hidden;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
回答by James Lawruk
For me, the viewport meta tag actually causeda horizontal scroll issue on the Blackberry.
对我来说，视口元标记实际上导致了黑莓上的水平滚动问题。
I removed content="initial-scale=1.0; maximum-scale=1.0;from the viewport tag and it fixed the issue. Below is my current viewport tag:
我content="initial-scale=1.0; maximum-scale=1.0;从视口标签中删除并解决了这个问题。以下是我当前的视口标签：
<meta name="viewport" content="user-scalable=0;"/>
回答by samael
回答by michaelsp
I use this to make the user still able to zoom in and out:
我用它来使用户仍然能够放大和缩小：
<meta name="viewport" content="width=device-width;" />
回答by Ronnie Royston
This works for me across all mobile devices in both portrait and landscape modes.
这适用于我在纵向和横向模式下的所有移动设备上。
<meta name="viewport" content="width=device-width, initial-scale = 0.86, maximum-scale=3.0, minimum-scale=0.86">
<meta name="viewport" content="width=device-width, initial-scale = 0.86, maximum-scale=3.0, minimum-scale=0.86">
回答by Salman Abir
Try this code,overflow will help to remove scrollbar.You can use it also for any div which is scrolling.
试试这个代码，溢出将有助于删除滚动条。你也可以将它用于任何滚动的 div。
html, body {
overflow-x: hidden;
}
body {
width:100%;
}
回答by Terry Riegel
Depending on box sizing width 100% might not always be the best option. I would suggest
根据盒子尺寸的宽度，100% 可能并不总是最好的选择。我会建议
width:100vw;
overflow-x: scroll;
This can be applied in the context of body, html as has been suggested or you could just wrap the content that is having an issue in a div with these settings applied.
这可以应用于已建议的正文，html 的上下文中，或者您可以将有问题的内容包装在应用这些设置的 div 中。
回答by Ms Designer
Just apply width:100%; to body
只需应用宽度：100%；身体
回答by Ranjith v
try like this
像这样尝试
css
css
*{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-msbox-sizing: border-box;
}
body{
overflow-x: hidden;
}
img{
max-width:100%;
}
