溢出-x:隐藏;在移动设备上不起作用 [英] Overflow-x:hidden; on mobile device not working
问题描述
我希望你们能帮助我,因为我似乎无法对此包住头。我建立了一个一页的站点,该站点工作正常,除了一件事,它是在平板电脑视口中隐藏的overflow-x:x(隐藏在平板电脑视口中(可能还有智能手机,还没有对此进行测试)
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)
尽管该主体具有 body {overflow-x:hidden;}
可以在PC上的正常浏览器中正常工作,但是我可以移到侧面大约25个像素左右,导致多数民众赞成在我旋转的div溢出,该溢出显示在屏幕上,我想隐藏它。
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.
有没有办法解决此问题?我在下面提供了部分头部和html / css
Is there a way to fix this? I supplied below part of the head and html / css
视口元标记。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
CSS应用于媒体查询,它们各自溢出元素
The CSS applied to the media queries and they respective elements that overflow
@media only screen and (max-width: 992px){
#skills, #experience {overflow-x:hidden;}
}
@media (max-width: 479px){
body {overflow-x:hidden;}
}
并将常规CSS应用于html /正文标记
And the regular CSS applied to the html / body tags
body, html {height: 100%;width: 100%;font-family: 'Source Sans Pro',Helvetica,Arial,sans-serif;color: #757575; overflow-x:hidden;}
id是#技能
和 #experience
有一个名为 .hoek
的类,其定义如下,导致溢出。
The id's #skills
and #experience
have a class called .hoek
which is defined as followed and causes the overflow.
.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;
}
我必须指出, #skills
和 #experience
是部分
,而不是div。我不确定这是否可能是代码中的问题,但我认为不是。如果需要更多信息,请告诉我,但我想我已经在这里介绍了基础。
I must point out, I think, that the #skills
and #experience
are sections
and 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.
我不知道从小提琴开始,所以我仅向您提供该站点的测试链接: http://www.jellyfishwebdesign.nl/Joost/ index.php
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
推荐答案
实际上在堆栈溢出处找到了答案:
Found the answer actually here on Stack overflow:
移动设备上的浏览器会忽略正文
和中的
标记(如果存在 overflow-x:hidden
html < meta name = viewport>
标记),因此我在body标记中创建了一个包装器来覆盖其余部分我的内容中带有 overflow-x:隐藏
,可以解决问题。
The browsers on mobile devices ignore the overflow-x:hidden
within the body
and html
tag if <meta name="viewport">
tag is present, thus i created a wrapper in the body tag covering the rest of my content with a overflow-x: hidden
in it, solving the problem.
文档:
Overflow-x:hidden不防止 内容不会在移动浏览器中溢出。
不好的是,它阻止了现在使用的jquery插件的滚动。...
The bad thing is that it prevents the use now of a jquery plugin, that scrolls....
这篇关于溢出-x:隐藏;在移动设备上不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!