我是第一次在响应式网站上工作,并注意到iOS7(在iPhone 4s上)Safari中的一个相当不理想的功能。这个问题可能会在以后的操作系统版本中持续存在,我不确定。
问题:正如您在上面的我的gif中看到的那样,视口中没有纵向模式滚动,因为html
和body
标签的高度是在CSS中设置为100%
。你看到的3个div每个都有一个33.33%
高度,这意味着它们应该占据页面的三分之一。(他们以纵向模式执行)
但是,当视图切换到横向模式并且用户尝试滚动时 - 页面会滚动,就像高度大于视口的100%一样。应该没有滚动,因为所有元素应该恰好构成100%的高度。
据我所知,当点击屏幕时,Safari会自动显示UI控件和地址栏,我的问题是,当UI控件出现时,有没有办法让网站调整大小?或者,当UI控件存在时,是否有任何方法可以适应页面上的所有内容而无需任何滚动?我希望那里没有滚动,就像网站处于纵向模式时一样。
我的测试网站是here(可能只想在iPhone中查看)
我将代码放在下面的代码段中。我无法使用jQuery。感谢。
html, body{
margin:0; padding:0; width:100%; height:100%; background:#fff;
font-family:Arial; overflow:hidden;
}
p{ margin:0; padding:0; } nav{ height:100%; }
.vCenter{
position:relative; top:50%; -webkit-transform:translateY( -50% );
-ms-transform:translateY( -50% ); transform:translateY( -50% );
}
.option{
margin:0; width:33.33%; height:100%; background:#transparent;
text-align:center; text-transform:uppercase; font-size:110%; cursor:pointer;
-webkit-touch-callout:none; -webkit-user-select:none;
-moz-user-select:none; -ms-user-select:none; user-select:none; float:left;
-webkit-transition: background 0.5s ease, color 0.5s ease, font-size 0.5s ease;
transition: background 0.5s ease, color 0.5s ease, font-size 0.5s ease;
}
.option:hover, .option:active{
background:#0bb; color:#eee;
}
@media( min-height:299px ) and ( max-height:371px ){
.option{
width:100%; height:33.33%; box-sizing:border-box;
}
#function{
border-bottom:none;
}
}
@media( height:372px ){
.option{
width:100%; height:124px; box-sizing:border-box;
}
#function{
border-bottom:1px solid #eee;
}
}
@media( min-height:373px ) and ( max-height:568px ){
.option{
width:100%; height:33.4%; box-sizing:border-box;
}
#function{
border-bottom:none;
}
}

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8"><meta name="author" content="Lynel Hudson">
<meta name="desciption" content="Front End Reference for Anyone">
<title>WEB</title><link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="base.css">
</head>
<body ontouchstart="">
<nav>
<div id="design" class="option">
<p class="vCenter">design</p>
</div>
<div id="function" class="option">
<p class="vCenter">function</p>
</div>
<div id="rule"></div>
<div id="advanced" class="option">
<p class="vCenter">advanced</p>
</div>
</nav>
<script>
</script>
</body>
</html>
&#13;