防止移动Safari上的水平滚动，溢出-x：隐藏中断站点

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：

• 溢：我的分度，我在等待所有的内容中出现的滑动
• 溢出-X：隐藏的HTML标签摆脱一侧方式卷轴，这造成由于内容宽度
• 媒体查询来设置溢出：隐藏在内容DIV如果屏幕小

我从用户的角度，当屏幕是想通大于1 024px，他们可以从内容准备好从幻灯片放映到屏幕上的额外视觉冲击中受益，但是当查看1024像素或更小的960像素宽的网站时，这种影响会丢失，因为无论如何内容几乎看不见。

html 
{ 
    overflow-x:hidden; 
} 

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

有可能不太哈克解决这个而这将是未来的证明足以应对比1,024像素更高的屏幕分辨率的移动设备，如果是的话我想听到它，希望它被投票作为主要答案