Html 如何使用响应式网页设计避免移动网页上的水平滚动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15086908/
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
How to avoid horizontal scroll on mobile web with responsive web design?
提问by vicenrele
I've an adaptable web application. To avoid horizontal scroll I've written the following CSS code:
我有一个适应性强的网络应用程序。为了避免水平滚动，我编写了以下 CSS 代码：
html {
overflow-x: hidden; }
This works fine on desktop, but not on mobile. If I display the app on a mobile device, the app adapts fine. The problem is when I do scroll from right to left. The page moves a bit. I want the page to not move horizontally.
这在桌面上运行良好，但在移动设备上不起作用。如果我在移动设备上显示该应用程序，该应用程序可以很好地适应。问题是当我从右向左滚动时。页面移动了一点。我希望页面不水平移动。
Edit:
编辑：
The page doesn't scroll on all mobile devices. I've tried it on two devices with the same version of Android and it only scrolls on one of the devices.
该页面不会在所有移动设备上滚动。我已经在两台具有相同 Android 版本的设备上进行了尝试，但它只能在其中一台设备上滚动。
回答by Jonathan Azulay
Check all the paddings. If you add padding to something with width set to 100% it will go outside the parent.
检查所有填充。如果向宽度设置为 100% 的内容添加填充，它将超出父级。
Shown here http://jsfiddle.net/wzZ3W/
此处显示 http://jsfiddle.net/wzZ3W/
Code
代码
<div id="fillX">
<div id="childXFill">
</div>
</div>
#fillX
{
background:red;
width:100%;
opacity:0.5;
}
#childXFill
{
background:blue;
width:100%;
padding:10px;
opacity:0.5;
}
Also check negative left and right margins on elements that span the page. E.g. http://jsfiddle.net/s7zrukj2/2/
还要检查跨越页面的元素的负左右边距。例如http://jsfiddle.net/s7zrukj2/2/
Also, use a CSS Reset.
此外，使用 CSS 重置。
If you wan't to use overflow: hiddenyou should probably set it on the body element too. Like so
如果您不想使用，overflow: hidden您也应该将其设置在 body 元素上。像这样
body, html { overflow-x:hidden; }
Although the fact that something is overflowing indicates an error in your responsive design and you should try and fix it instead to prevent something not being visible to a mobile user.
尽管某些内容溢出的事实表明您的响应式设计中存在错误，但您应该尝试修复它以防止移动用户看不到某些内容。
回答by user3302919
If is not working for mobile you should use the following meta tag:
如果不适用于移动设备，则应使用以下元标记：
<meta name="viewport" content="width=device-width, initial-scale = 1.0,
maximum-scale=1.0, user-scalable=no" />
this will set the width to device width.
这会将宽度设置为设备宽度。
回答by BaptisteGillard
You can put this in your console to outline all block/div. Then you can find the one which is outside of your container.
您可以将其放在控制台中以概述所有块/div。然后您可以找到容器外的那个。
[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})
回答by Luke Robertson
You will need to make sure the width of the parent container isn't wider than the mobile screen size
您需要确保父容器的宽度不超过移动屏幕尺寸
So best bet is to use % widths for everything and ensure no content has fixed with that would be bigger than a mobile screen size
所以最好的办法是对所有内容都使用 % 宽度，并确保没有固定的内容大于移动屏幕尺寸
回答by Nuno Sarmento
Set your mobile viewport on your html header
在 html 标题上设置移动视口
<meta name="viewport" content="width=device-width, initial-scale = 1.0,maximum-scale=1.0, user-scalable=no" />
Make sure your hide de overflow
确保你的隐藏溢出
body, html { overflow-x:hidden; }
回答by RichardW11
I just wanted to share how I solved my issue. I tried everything including the overflow-x, adding a red border to all elements, etc. Still was able to scroll right.
我只是想分享我如何解决我的问题。我尝试了所有方法，包括溢出-x、为所有元素添加红色边框等。仍然能够向右滚动。
1st I started by deleting containers in "inspect element" until the scroll right was not possible. Then drilled into the div's that were the problem. It was a hidden drop down div that was on "visible: hidden" and display:block;. I fixed that by putting "display:none"and all is good now.
首先，我首先删除“检查元素”中的容器，直到无法向右滚动。然后钻入问题所在的div。这是一个隐藏的下拉 div，位于“可见：隐藏”和显示：块上；. 我通过放置“显示：无”来解决这个问题，现在一切都很好。
