html – 当隐藏显示地址栏时,内容会在Chrome iOS上垂直“跳转”并调整视口大小

概述我在我的网站上有不同的部分,我希望其中一些部分能够获得完整的视口高度. 所以我的身高与身高：100vh; 在Chrome iOS上,只要地址栏被隐藏或再次显示,就会导致内容略微“垂直跳跃”.特别是,只要用户在一个方向上滚动然后在另一个方向滚动,就会发生这种情 您可以在此处查看示例(查看Chrome移动浏览器)： www.PlasticPalacePeople.com 知道如何解决这个问题吗？ (理 我在我的网站上有不同的部分,我希望其中一些部分能够获得完整的视口高度.
所以我的身高与身高：100vh;

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

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

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

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

谢谢

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

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

HTML

<div ></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

总结

以上是内存溢出为你收集整理的html – 当隐藏/显示地址栏时,内容会在Chrome iOS上垂直“跳转”并调整视口大小全部内容，希望文章能够帮你解决html – 当隐藏/显示地址栏时,内容会在Chrome iOS上垂直“跳转”并调整视口大小所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。