Html 溢出-x：隐藏；在移动设备上不工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24193272/
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
Overflow-x:hidden; on mobile device not working
提问by Dorvalla
I hope you guys can help me cause I cant seem to wrap my head arroud this. I build a one-page site which works fine, except for one thing, which is the overflow-x:hidden on the tablet viewport (and probably smartphone too, havent tested that yet)
我希望你们能帮助我，因为我似乎无法解决这个问题。我建立了一个工作正常的单页网站，除了一件事，即溢出-x：隐藏在平板电脑视口上（可能还有智能手机，还没有测试过）
Despite the body having body {overflow-x:hidden;}which works fine within normal browsers on the pc, i am able to move to the side for about 25 pixels or so, cause thats the overflow of my rotated div, that sticks out of the screen, which i wanted to hide.
尽管主体body {overflow-x:hidden;}在 PC 上的普通浏览器中运行良好，但我能够向一侧移动大约 25 像素左右，因为这是我旋转的 div 溢出，它伸出屏幕，我想隐藏它.
Is there a way to fix this? I supplied below part of the head and html / css
有没有办法来解决这个问题？我提供了以下部分头部和 html / css
The viewport meta tag.
视口元标记。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
The CSS applied to the media queries and they respective elements that overflow
应用于媒体查询的 CSS 及其各自溢出的元素
@media only screen and (max-width: 992px){
#skills, #experience {overflow-x:hidden;}
}
@media (max-width: 479px){
body {overflow-x:hidden;}
}
And the regular CSS applied to the html / body tags
以及应用于 html / body 标签的常规 CSS
body, html {height: 100%;width: 100%;font-family: 'Source Sans Pro',Helvetica,Arial,sans-serif;color: #757575; overflow-x:hidden;}
The id's #skillsand #experiencehave a class called .hoekwhich is defined as followed and causes the overflow.
id#skills和#experience有一个类.hoek被定义为遵循并导致溢出。
.hoek {margin: 0 -50px;
-webkit-transform-origin:left center;
-moz-transform-origin:left center;
-o-transform-origin:left center;
-ms-transform-origin:left center;
margin-top: -175px;
-webkit-transform:rotate(5deg);
-moz-transform:rotate(5deg);
-o-transform:rotate(5deg);
-ms-transform:rotate(5deg);
z-index: 20;
}
I must point out, I think, that the #skillsand #experienceare sectionsand not divs. I am not sure if that might be a problem within the code, but I thought not. If there is anymore information that is needed, please let me know, but I thought I had covered the bases here.
我必须指出，我认为#skillsand #experiencearesections而不是 div。我不确定这是否可能是代码中的问题，但我认为不是。如果需要更多信息，请告诉我，但我想我已经涵盖了这里的基础。
I dont know where to begin with a fiddle, so I supply you just the test link of the site: http://www.jellyfishwebdesign.nl/Joost/index.php
我不知道从哪里开始小提琴，所以我只为您提供该网站的测试链接：http: //www.jellyfishwebdesign.nl/Joost/index.php
回答by Dorvalla
Found the answer actually here on Stack overflow:
在 Stack Overflow 上实际上找到了答案：
The browsers on mobile deviced ignore the overflow-x:hiddenwithin the bodyand htmltag, thus i created a wrapper in the body tag covering the rest of my content with a overflow-x: hiddenin it, solving the problem.
移动deviced浏览器忽略overflow-x:hidden了内body和html标签，因此，我创造了body标签覆盖我的内容的其余部分用的包装overflow-x: hidden在里面，解决问题。
Documentation:
文档：
Overflow-x:hidden doesn't prevent content from overflowing in mobile browsers.
Overflow-x:hidden 不会阻止内容在移动浏览器中溢出。
The bad thing is that it prevents the use now of a jquery plugin, that scrolls....
不好的是，它阻止了现在使用滚动的 jquery 插件......
回答by Tempurturtul
Try setting minimum-scale=1instead of maximum-scale=1.
尝试设置minimum-scale=1而不是maximum-scale=1.
minimum-scalecontrols how far outthe user can zoom, while maximum-scalecontrols how far inthey can zoom. To prevent viewing of the overflow you need to limit the user's ability to zoom out, not in.
minimum-scale控制多远了，用户可以放大，而maximum-scale控制多远的，他们可以放大或缩小。为了防止查看溢出，您需要限制用户缩小而不是缩小的能力。
回答by Adrià
As pointed out by Dorvalla, bodyand htmltags are ignored by smartphones browsers, although not by "big screen" browsers, I solved the issue by using the first child of the page structure, so no need of an aditional wrapper.
正如Dorvalla指出，body和html标签是由智能手机浏览器忽略，虽然不是以“大屏幕”浏览器，我使用了页面结构的第一个孩子解决问题，所以没有必要的aditional的包装的。
e.g. for my WordPress case:
例如对于我的 WordPress 案例：
.site {
overflow-x: hidden;
/* Unnecessary IMHO, uncomment next line to force hidden behavior */
/* overflow-x: hidden !important; */
/* Additional tunning proposed by the community */
position: relative;
width: 100%;
}
回答by UXMike
I found that applying:
我发现申请：
overflow-x: hidden
to the div wrapper inside the body made the scrolling a little jumpy on iOS Safari so therefore just gave it overflow: hiddenand left the body as visible. This worked perfect for me in all browsers and devices I needed.
到身体内的 div 包装器使滚动在 iOS Safari 上有点跳跃，因此只给它overflow: hidden并让身体保持可见。这在我需要的所有浏览器和设备中都非常适合我。
回答by Mikeys4u
I had this same problem and tried applying body with overflow-x: hidden;, and lots of other answers, but what did work in my Wordpress, was applying a global CSS rule as below.
我遇到了同样的问题，并尝试使用 overflow-x: hidden; 和许多其他答案应用 body，但在我的 Wordpress 中有效的是应用如下全局 CSS 规则。
body,html {
overflow-x: hidden;
}
This eliminates the movement left to right on mobiles. The HTML part is needed, not just body!
这消除了移动设备上从左到右的移动。需要 HTML 部分，而不仅仅是正文！
