当地址栏被隐藏/显示时，内容在Chrome iOS上垂直跳转，并具有视口大小

我在我的网站上有不同的部分，我希望他们中的一些人能够看到整个视口的高度。 所以我的height: 100vh;

在Chrome iOS上，当地址栏被隐藏或再次显示时，这会导致内容略微“垂直跳跃”。 尤其是，每当用户在一个方向上滚动然后在另一个方向上滚动时就会发生这种情况

你可以在这里看到一个例子（看看Chrome手机浏览器）： www.PlasticPalacePeople.com

任何想法如何解决？ （理想情况下，让我的部分采用全视angular高度）

PS：Safari的iOS和embedded式Facebook网页浏览器似乎没有问题

谢谢

Answer 1

嘿，我遇到了同样的问题。 虽然这并不能解决手机浏览器中CSS Viewport Heightresize问题的麻烦，但它似乎是一个可行的解决方法。

只需将下面的“jumbotron”更改为您希望全高的元素/元素的CSSselect器。

HTML

 <div class="jumbotron"></div> 

CSS

 .jumbotron { height: 100vh; } 

JS

 function calcVH() { $('.jumbotron').innerHeight( $(this).innerHeight() ); } (function($) { calcVH(); $(window).on('resize orientationchange', function() { calcVH(); }); })(jQuery); 

它所做的是在页面加载到视口高度时设置该部分的高度。 似乎工作，但我希望这可以做到没有JavaScript。

更新：这是我完整的答案

https://stackoverflow.com/a/40156488/1728524