防止移动 safari 上的水平滚动，overflow-x:hidden break 站点

Question

我希望在移动 safari 中阻止我的投资组合网站上的水平滚动。该设计具有不在屏幕上的内容 div，直到用户单击菜单项然后他们转换到屏幕上。这在台式机上运行良好，但在移动设备上会留下大量额外的空白空间，用户可以水平滚动进入。

网站是http://www.robiannone.com

我已经使用了这个视口标签 <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1" />

我已经尝试使用overflow-x:hidden 进行媒体查询，但没有任何运气。当我将 overflow-x:hidden 添加到 html 或 body 标记时，没有任何反应，但是当我将它添加到 html 和 body 标记时，站点会中断，并在标题附近放置一个滚动条。我已经搜索了其他解决方案，但到目前为止还没有提出任何帮助。会不会因为我故意将内容放在屏幕外而不起作用？

非常感谢您提供的任何帮助！

这是内容 div 的 css：

.web {
width: 953px;
height: 150px;
position: absolute;
margin-top:40px;
margin-left:0px;
z-index:1;opacity:0;
padding:7px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;

/*Transition Effect, Thanks css-tricks.com!  */
-webkit-transition: opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear, margin-top 1.5s ease, margin-left 0.9s ease;
-moz-transition: opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear, margin-top 1.5s ease, margin-left 0.9s ease;
-o-transition: opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear, margin-top 1.5s ease, margin-left 0.9s ease;
-ms-transition: opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear, margin-top 1.5s ease, margin-left 0.9s ease;
transition: opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear, margin-top 1.5s ease, margin-left 0.9s ease;
}
.video {
width: 953px;
height: 150px;
position: absolute;
margin-top:40px;
margin-left:0px;
z-index:500;
overflow:hidden;
opacity:0;
padding:7px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;

/*Transition Effect, Thanks css-tricks.com!  */
-webkit-transition:opacity 1s linear 0.3s, height 1s linear 0.3s, z-index 0.1s linear, margin-top 0.9s ease, margin-left 1.5s ease;
-moz-transition:opacity 1s linear 0.3s, height 1s linear 0.3s, z-index 0.1s linear, margin-top 0.9s ease, margin-left 1.5s ease;
-o-transition:opacity 1s linear 0.3s, height 1s linear 0.3s, z-index 0.1s linear, margin-top 0.9s ease, margin-left 1.5s ease;
-ms-transition:opacity 1s linear 0.3s, height 1s linear 0.3s, z-index 0.1s linear, margin-top 0.9s ease, margin-left 1.5s ease;
 transition:opacity 1s linear 0.3s, height 1s linear 0.3s, z-index 0.1s linear, margin-top 0.9s ease, margin-left 1.5s ease;
}
.about {
width: 953px;
height: auto !important;
position: absolute;
margin-top:40px;
z-index:9000;
opacity:0;
padding:7px;

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
border-radius: 10px;

/*Transition Effect, Thanks css-tricks.com!  */
  -webkit-transition:opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear, margin-top 1.5s ease, margin-left 0.9s ease;
  -moz-transition:opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear, margin-top 1.5s ease, margin-left 0.9s ease;
  -o-transition:opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear, margin-top 1.5s ease, margin-left 0.9s ease;
  -ms-transition:opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear, margin-top 1.5s ease, margin-left 0.9s ease;
    transition:opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear,            margin-top 1.5s ease, margin-left 0.9s ease;  

/*Classes that Div's take once clicked*/
.prime{
width: 953px;
height: 750px;
background:rgba(255,255,255,.9);
margin-left:0px;
position: absolute;
margin-top:75px;
z-index:9001;
opacity:1;
overflow:auto;   
}

.third{
 width: 953px;
height: 200px;
opacity: 0.0 !important;
position: absolute;
margin-top:-499px;
margin-left:1810px;
z-index:1;
overflow:hidden;  
}

.secondary{
width: 953px;
height: 200px;
opacity: 0 !important;
position: absolute;
margin-top:499px;
margin-left:-1810px;
z-index:500;
overflow:hidden;   
}

Answer 1

我刚刚解决了一个类似的问题，方法是使用媒体查询在元素加载到小屏幕时设置溢出：隐藏。

所以我的 css 中有：

• 溢出：在我的 div 上可见，我的所有内容都在等待滑动
• overflow-x:hidden 在 html 标记上以摆脱由于内容宽度而产生的侧向滚动条
• 设置溢出的媒体查询：如果屏幕很小，则隐藏在内容 div 中

我从用户的角度认为，当屏幕大于 1024 像素时，他们将受益于让内容准备好从任一侧滑到屏幕上的额外视觉效果，但是当在 1024 像素或更小的屏幕上查看 960 像素宽的网站时，这由于内容几乎是不可见的，因此影响会丢失。

html
{
    overflow-x:hidden;
}

@media only screen and (max-width: 1024px)
{
    overflowing_content_div { overflow:hidden; }
}

可能有一个不那么老套的解决方案，而且这个解决方案在未来足以应对屏幕分辨率高于 1024 像素的移动设备，如果是这样，我想听听它，并希望它被选为主要答案