CSS3 100vh在移动浏览器中不是恒定的

Nereo Costacurta：

我有一个非常奇怪的问题……在每个浏览器和移动版本中，我都遇到了以下问题：

加载页面时，所有浏览器都有一个顶部菜单（例如，显示地址栏），当您开始滚动页面时，该菜单会向上滑动。
有时仅在视口的可见部分计算100vh ，因此当浏览器栏向上滑动时100vh会增加（以像素为单位）
由于尺寸已更改，所有布局都会重新绘制和重新调整
对用户体验的不良影响

如何避免这个问题？当我第一次听说viewport-height时，我很兴奋，我认为可以将其用于固定高度块而不是使用javascript，但现在我认为，做到这一点的唯一方法实际上是带有一些resize事件的javascript ...

您可以在以下示例中看到问题：

谁能帮我/建议CSS解决方案？

简单的测试代码：

/* maybe i can track the issue whe it occours... */
$(function(){
  var resized = -1;
  $(window).resize(function(){
    $('#currenth').val( $('.vhbox').eq(1).height() );
    if (++resized) $('#currenth').css('background:#00c');
  })
  .resize();
})

*{ margin:0; padding:0; }

/*
  this is the box which should keep constant the height...
  min-height to allow content to be taller than viewport if too much text
*/
.vhbox{
  min-height:100vh;
  position:relative;
}

.vhbox .t{
  display:table;
  position:relative;
  width:100%;
  height:100vh;
}

.vhbox .c{
  height:100%;
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}

<div class="vhbox" style="background-color:#c00">
  <div class="t"><div class="c">
  this div height should be 100% of viewport and keep this height when scrolling page
    <br>
    <!-- this input highlight if resize event is fired -->
    <input type="text" id="currenth">
  </div></div>
</div>

<div class="vhbox" style="background-color:#0c0">
  <div class="t"><div class="c">
  this div height should be 100% of viewport and keep this height when scrolling page
  </div></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

指甲：

不幸的是，这是故意的。

这是一个众所周知的问题（至少在safari mobile中），这是有意的，因为它可以防止其他问题。Benjamin Poulain回复了一个webkit错误：

这完全是故意的。为了达到这种效果，我们付出了很多工作。:)

基本问题是：滚动时可见区域会动态变化。如果我们相应地更新CSS视口高度，则需要在滚动过程中更新布局。不仅看起来像狗屎，而且在大多数页面上几乎不可能以60 FPS的速度进行操作（60 FPS是iOS上的基准帧速率）。

很难向您展示“看起来很烂”的部分，但是可以想象一下，当您滚动时，内容在移动，屏幕上您想要的内容也在不断变化。

无法动态更新高度，我们有几种选择：在iOS上放置视口单位，像在iOS 8之前一样匹配文档大小，使用小视图尺寸，使用大视图尺寸。

根据我们的数据，使用较大的视图尺寸是最好的折衷方案。大多数使用视口单位的网站在大多数时候看起来都很不错。

Nicolas Hoizey对此进行了相当多的研究：https：//nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile -browsers.html

没有修复计划

此时，除了禁止在移动设备上使用视口高度以外，您无能为力。Chrome在2016年也更改为：

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。