Dor*_*lla 9 html css3 responsive-design
我希望你们能帮助我,因为我似乎无法将这个包裹起来.我建立了一个单页网站,工作正常,除了一件事,这是溢出-x:隐藏在平板电脑视口(也可能是智能手机,还没有测试过)
尽管机身body {overflow-x:hidden;}在PC上的普通浏览器中工作正常,但我可以移动到大约25个像素左右,导致我旋转的div溢出,它伸出屏幕,我想隐藏.
有没有办法来解决这个问题？我提供了部分头部和html/css
视口元标记.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
CSS应用于媒体查询以及它们各自溢出的元素
@media only screen and (max-width: 992px){
#skills, #experience {overflow-x:hidden;}
}
@media (max-width: 479px){
body {overflow-x:hidden;}
}
并且常规CSS应用于html/body标签
body, html {height: 100%;width: 100%;font-family: 'Source Sans Pro',Helvetica,Arial,sans-serif;color: #757575; overflow-x:hidden;}
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;
}
我必须指出,我认为,在#skills和#experience有sections和没有的div.我不确定这可能是代码中的问题,但我不这么认为.如果有更多信息需要,请告诉我,但我想我已经覆盖了这里的基础.
我不知道从哪里开始小提琴,所以我只提供网站的测试链接:http://www.jellyfishwebdesign.nl/Joost/index.php
Dor*_*lla 14
在Stack溢出时实际找到答案:
移动deviced浏览器忽略overflow-x:hidden了内body和html标签,因此,我创造了body标签覆盖我的内容的其余部分用的包装overflow-x: hidden在里面,解决问题.
文档:
Overflow-x:hidden不会阻止内容在移动浏览器中溢出.
坏的是它阻止了现在使用jquery插件,滚动....
小智 11
尝试设置minimum-scale=1而不是maximum-scale=1.
minimum-scale控制多远了,用户可以放大,而maximum-scale控制多远的,他们可以放大或缩小.要防止查看溢出,您需要限制用户缩小的能力,而不是.
小智 9
如果你应用overflow-x:hidden到body，你可能也想应用到html。
body,html {
overflow-x:hidden;
}
尝试设置minimum-scale=1而不是maximum-scale=1或initial-scale=1。
例如。
<meta name="viewport" content="width=device-width, minimum-scale=1.0">
我遇到了同样的问题，并尝试使用 overflow-x: hidden; 和许多其他答案应用 body，但在我的 Wordpress 中有效的是应用如下全局 CSS 规则。
body,html {
overflow-x: hidden;
}
这消除了移动设备上从左到右的移动。需要 HTML 部分，而不仅仅是正文！
正如Dorvalla指出，body和html标签是由智能手机浏览器忽略，虽然不是以“大屏幕”浏览器，我使用了页面结构的第一个孩子解决问题，所以没有必要的aditional的包装的。
例如对于我的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%;
}
我的分析截至 2021 年 9 月。在 Safari 和 Firefox 37 (iOS 15) 上测试。
接受的答案及其 SO 链接相当旧（2013-2014），似乎不再有效。另外，我发现在 my 上
添加“包装”并不是很优雅，并且可能会导致意外的行为。divbody
我正在处理的页面非常简单，只有一张背景图像可能会溢出到较小屏幕的屏幕右侧。
minimum-scale=1元viewport标记不起作用。这可以防止缩小，但我仍然可以在右侧看到这个丑陋的滚动条。overflow-x: hidden;了<html>没效果。overflow-x: hidden;了<body>没效果。overflow-x: hidden;两者都适用<html>并且<body> 确实有效。