Question

我在我的网站上有不同的部分，我希望其中一些部分能够获得完整的视口高度。所以我的尺寸为height: 100vh;

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

您可以在此处查看示例（查看Chrome移动浏览器）： www.PlasticPalacePeople.com

知道如何解决这个问题吗？（理想情况下，保持我的部分占据整个视口高度）

P.S。：针对iOS和嵌入式Facebook网络浏览器的Safari似乎没有问题

谢谢

Answer 1

嘿，我遇到了同样的问题。虽然这并没有解决移动Chrome中CSS视口高度调整大小问题的烦恼，但它似乎确实是一种可行的解决方法。

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

<强> 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

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

1 个答案: