不要使用推荐的方法，如-webkit-fill-available。 我花了一整天的时间来修复这个“bug”。

当你的应用程序被一个带有“下巴”的浏览器加载时，添加一个类。

JavaScript

// Angular example but applicable for any JS solution
@HostBinding('class.browser-has-chin') browserHasChin: boolean = false;

public ngOnInit(): void {
    this.browserHasChin = this._isMobileSafari();
}

private _isMobileSafari() {
    return navigator.userAgent.match(/(iPod|iPhone|iPad)/) && navigator.userAgent.match(/AppleWebKit/) ? true : false;
}

CSS

.browser-has-chin {
  @media screen and (max-device-width: 767px){
    // offset with padding or something
  }
}

注: 在跨浏览器兼容性方面，-webkit-fill-available道具存在一些重大问题。

我能够让它在Chrome和iOS Safari中工作，以修复下巴/高度计算问题。然而，它破坏了Android Chrome和Firefox也有bug。

似乎-webkit-fill-available在某种程度上是匆忙加入webkit的，也许是苹果偶然采用的，作为下巴/高度计算的修复?

它依赖于内在的大小，这是不安全的使用。

你可以试着给出位置:fixed;上图:0;底部:0;属性到您的容器。

当我在寻找一个解决方案的时候，这里是我的每个人使用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; ｝

我刚刚发现我设计的一个web应用程序在iphone和ipad上有这个问题，并发现一篇文章建议使用针对特定苹果设备的媒体查询来解决这个问题。

我不知道是否可以在这里分享那篇文章中的代码，但是地址是:http://webdesignerwall.com/tutorials/css-fix-for-ios-vh-unit-bug

引用这篇文章:“使用针对旧版本iPhone和iPad分辨率的媒体查询，将元素高度与设备高度匹配。”

他们只添加了6个媒体查询来适应全高度元素，它应该可以工作，因为它是完全由CSS实现的。

编辑等待:我现在无法测试它，但我会回来报告我的结果。

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

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

:

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

VH 100在移动设备上表现不佳，因为它没有考虑iOS栏(或其他平台上的类似功能)。

一个很好的解决方案是使用JavaScript的"window.innerHeight"。

简单地将元素的高度赋给这个值。 $ (' .element-name ') .height (window.innerHeight);

注意:在JS中创建一个函数可能很有用，这样当屏幕调整大小时，高度就可以改变。但是，我建议只在屏幕宽度改变时调用该函数，这样当用户向下滚动页面时iOS栏消失时，元素的高度就不会跳跃。