iphone - 防止移动 safari 上的水平滚动，overflow-x :hidden breaks site

Question

我正在寻找防止在移动 safari 中我的投资组合网站上的水平滚动。该设计的特点是屏幕外的内容 div，直到用户单击菜单项，然后它们才会转换到屏幕上。这在桌面上运行良好，但在移动设备上它会留下大量额外的空白空间，用户可以水平滚动进入。

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

我用过这个viewport标签 <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

我刚刚通过使用媒体查询设置 overflow:hidden 在元素加载到小屏幕上时解决了类似的问题。

所以我在我的 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; }
}

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