在移动浏览器中CSS3 100vh不是固定的 [英] CSS3 100vh not constant in mobile browser

问题描述

我有一个很奇怪的问题......在每一个浏览器和手机版本中，我遇到过这种情况：

• 所有浏览器都有当您开始滚动页面时，上载页面（例如显示地址栏）的顶部菜单。


• 100vh仅在视口的可见部分计算，因此当浏览器条上滑100vh（以像素计）


• 所有版面在尺寸改变后重新绘制和重新调整


• 不好的跳跃效果为用户体验

如何避免此问题？当我第一次听到视口高度时，我很兴奋，我想我可以使用它来固定高度块而不是使用javascript，但现在我认为唯一的方法是实现JavaScript，其中包含一些调整大小的事件... p>

您可以在示例网站

任何人都可以帮我/建议一个CSS解决方案吗？

---

简单测试代码：

/ *也许我可以跟踪它发生的问题... * / $（function（）{var resized = -1; $（window）.resize（function（）{$（'＃currenth'）。val（$（'。 vhbox'）。eq（1）.height（））; if（++ resized）$（'＃currenth'）。css（'background：＃00c'）;}）.resize（）;}）

  * {margin：0;填充：0; } / *这是应该保持高度不变的盒子......如果文本太多，最小高度允许内容比视口更高* /。vhbox {min-height：100vh; position：relative;}。vhbox .t {display：table;位置：相对;宽度：100％; height：100vh;}。vhbox .c {height：100％;显示：表细胞;垂直对齐：中部; text-align：center;}  

< div class = vhboxstyle =background-color：＃c00> < div class =t>< div class =c>这个div高度应该是视口的100％，并且在滚动页面时保持这个高度< br> <！ - 如果调整大小事件被触发，则此输入突出显示 - > < input type =textid =currenth> < / div>< / div>< / div>< div class =vhboxstyle =background-color：＃0c0> < div class =t>< div class =c>此div高度应为视口的100％并在滚动页面时保持此高度< / div>< / div>< / div>< script src =https://ajax.googleapis.com/ajax/libs /jquery/1.11.1/jquery.min.js\"></script>

解决方案

不幸的是，这是故意的... 这是一个众所周知的问题（至少在safari移动中），这是故意的，因为它可以防止其他问题。 Benjamin Poulain回复了一个webkit bug ：



这完全是故意的。为了达到这个效果，我们做了很多工作。 ：）

基本问题是这样的：可见区域在您滚动时动态变化。如果我们相应地更新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浏览器似乎也想改编，尽管目前还不确定是否他们会按照。

I have a very odd issue... in every browser and mobile version I encountered this behavior:

• all the browser have a top menu when you load the page (showing the address bar for example) which slide up when you start scroll the page.
• 100vh are calculated only on visible part of viewport, so when the browser bar slide up 100vh increases (in terms of pixels)
• all layout re-paint and re-adjust since the dimensions have changed
• bad jumpy effect for user experience

how can avoid this problem? When I first heard of viewport-height I was excited and I thought I could use it for fixed height blocks istead of using javascript, but now I think the only way to do that is in fact javascript with some resize event...

you can see the problem at: sample site

Can anyone help me with / suggest a CSS solution?

---

simple test code:

/* 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 sould 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>

解决方案

Unfortunately this is intentional…

This is a well know issue (at least in safari mobile), which is intentional, as it prevents other problems. Benjamin Poulain replied to a webkit bug:

This is completely intentional. It took quite a bit of work on our part to achieve this effect. :)

The base problem is this: the visible area changes dynamically as you scroll. If we update the CSS viewport height accordingly, we need to update the layout during the scroll. Not only that looks like shit, but doing that at 60 FPS is practically impossible in most pages (60 FPS is the baseline framerate on iOS).

It is hard to show you the "looks like shit" part, but imagine as you scroll, the contents moves and what you want on screen is continuously shifting.

Dynamically updating the height was not working, we had a few choices: drop viewport units on iOS, match the document size like before iOS 8, use the small view size, use the large view size.

From the data we had, using the larger view size was the best compromise. Most website using viewport units were looking great most of the time.

Nicolas Hoizey has researched this quite a bit: https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html

No fix planned

At this point, there is not much you can do except refrain from using viewport height on mobile devices. Mobile Chrome seems to want to adapt this too, although it is not sure if they will follow through.

这篇关于在移动浏览器中CSS3 100vh不是固定的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！