下面是我在React应用程序中使用的一个方法。

iPhone 11 Pro和iPhone Pro Max - 120px

iPhone 8 - 80px

max-height: calc(100vh - 120px);

这是一个折衷方案，但相对简单

您可以通过添加以下脚本和样式来做到这一点

function appHeight() {
  const doc = document.documentElement
  doc.style.setProperty('--vh', (window.innerHeight*.01) + 'px');
}

window.addEventListener('resize', appHeight);
appHeight();

风格

.module {
  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
}

关于这个问题及其可能的解决方案可以在这篇博客文章中找到:在100vh布局中寻址iOS地址栏

我最终在我的React应用程序中的解决方案是利用上面帖子中描述的React -div-100vh库。

找到这个答案的人正在与移动视图上向下/向上滚动的固定位置的元素的连接跳跃问题作斗争，根元素需要在底部而不是顶部指定属性，并且应该在px中给出一个字段值。这就解决了问题

改变: 元素{ 位置:固定; 上图:90年vh; 左:90 vh; 转换:翻译(-95%，-95%); ｝

:

元素{ 位置:固定; 底部:90 px;/*这是更改*/ 左:90 vh; 转换:翻译(-95%，-95%); }

当我在寻找一个解决方案的时候，这里是我的每个人使用VueJS与Vuetify(我的解决方案使用v-app-bar, v-navigation-drawer和v-footer): 我创建了App.scss(在App.vue中使用)，内容如下:

.v-application { 身高:100 vh; 高度:-webkit-fill-available; ｝ .v-application——包装{ Min-height: 100vh ! important: -webkit-fill-available; ｝

对于我所创建的许多网站，客户端都会要求100vh的横幅，正如你所发现的那样，当你开始滚动时，它会导致糟糕的“跳跃”体验。这就是我如何在所有设备上获得流畅一致的体验:

我首先设置我的横幅元素CSS的高度:100vh

然后我使用jQuery来获得我的横幅元素的像素高度，并使用这个高度应用内联样式。

var viewportHeight = $('.banner').outerHeight();
$('.banner').css({ height: viewportHeight });

这样做解决了移动设备上的问题，当页面加载时，使用CSS将横幅元素设置为100vh，然后jQuery通过在我的横幅元素上放置内联CSS来阻止它在用户开始滚动时调整大小。

然而，在桌面上，如果用户调整他们的浏览器窗口大小，我的横幅元素不会调整大小，因为它现在有一个固定的高度像素设置由于上述jQuery。为了解决这个问题，我使用Mobile Detect在我的文档正文中添加了一个“Mobile”类。然后我将上面的jQuery封装在if语句中:

if ($('body').hasClass('mobile')) {
  var viewportHeight = $('.banner').outerHeight();
  $('.banner').css({ height: viewportHeight });
}

因此，如果用户在移动设备上，“mobile”类就会出现在我的页面主体上，并且会执行上面的jQuery。所以我的横幅元素只会得到内联CSS应用在移动设备上，同时在桌面上，原来的100vh CSS规则仍然存在。