4

在此处输入图像描述我希望在移动 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;   
}
4

1 回答 1

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 像素的移动设备，如果是这样，我想听听它，并希望它被选为主要答案

于 2013-01-24T13:36:10.307 回答