隐藏/显示地址栏时，内容在 Chrome iOS 上垂直“跳跃”，视口大小调整 [关闭]答案

【问题标题】：content "jumps" vertically on Chrome iOS with viewport sizing when address bar is hidden/displayed [closed]隐藏/显示地址栏时，内容在 Chrome iOS 上垂直“跳跃”，视口大小调整 [关闭]
【发布时间】：2016-11-11 19:33:21
【问题描述】：

我的网站上有不同的部分，我希望其中一些占据整个视口高度。所以我用height: 100vh;调整大小

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

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

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

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

谢谢

【问题讨论】：

您的背景图片似乎实际上正在调整大小，给您带来不和谐的体验。指定一个'width:100vw;'可能对你很有帮助在您的“.section”上。
是的，你是对的，我相信会发生什么：由于 Chrome iOS 地址栏消失/重新出现导致视口高度发生变化，背景图像正在调整大小。奇怪的是（但幸运的是）这不会在 Safari 上发生。我不认为指定宽度会改变，因为高度仍将设置为 100vh 并因此调整大小
但是背景图像容器 div 值得一试，对吧？
这不仅发生在 ios 上，也发生在 android chrome 上。很烦人。添加 100vw 不会改变任何东西
任何人都找到了唯一的 CSS 解决方案？在这里添加 Javascript 似乎有点过头了。

标签： html ios css google-chrome size

【解决方案1】：

嘿，我遇到了同样的问题。虽然这并不能解决移动 chrome 中 CSS 视口高度调整问题的烦人问题，但它似乎确实是一个可行的解决方法。

只需将下面的“jumbotron”更改为您想要全高的元素/元素的 CSS 选择器。

HTML

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

CSS

.jumbotron {
  height: 100vh;
}

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

它的作用是在页面加载到视口高度时设置部分的高度。似乎工作，虽然我希望这可以在没有 javascript 的情况下完成。

更新：这是我的完整答案

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

【讨论】：