横向模式下iPhone视口高度过大

时间:2015-04-16 02:36:40

标签: css ios7 mobile-safari

iPhone viewport

我是第一次在响应式网站上工作,并注意到iOS7(在iPhone 4s上)Safari中的一个相当不理想的功能。这个问题可能会在以后的操作系统版本中持续存在,我不确定。

问题:正如您在上面的我的gif中看到的那样,视口中没有纵向模式滚动,因为htmlbody标签的高度是在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;
&#13;
&#13;

0 个答案:

没有答案