不幸的是，这是故意的……

这是一个众所周知的问题(至少在safari mobile中)，这是故意的，因为它可以防止其他问题。Benjamin Poulain回复了一个webkit漏洞:

This is completely intentional. It took quite a bit of work on our part to achieve this effect. :) The base problem is this: the visible area changes dynamically as you scroll. If we update the CSS viewport height accordingly, we need to update the layout during the scroll. Not only that looks like shit, but doing that at 60 FPS is practically impossible in most pages (60 FPS is the baseline framerate on iOS). It is hard to show you the “looks like shit” part, but imagine as you scroll, the contents moves and what you want on screen is continuously shifting. Dynamically updating the height was not working, we had a few choices: drop viewport units on iOS, match the document size like before iOS 8, use the small view size, use the large view size. From the data we had, using the larger view size was the best compromise. Most website using viewport units were looking great most of the time.

Nicolas Hoizey对此做了很多研究:https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html

没有修复计划

在这一点上，除了避免在移动设备上使用视口高度之外，你没有什么可以做的。Chrome在2016年也变成了这样:

https://groups.google.com/a/chromium.org/forum/ !主题/ blink-dev / BK0oHURgmJ4 https://developers.google.com/web/updates/2016/12/url-bar-resizing

body {
   width: 100%;
   height: 100%
}

100%会根据屏幕大小自行调整但出于某种原因 100vh在屏幕变化时调整有问题，所以如果你使用100vh或100%，使用底部0将受到影响

例如，当搜索栏在视图中或不在移动中，100%与变化，其中100vh将粘在屏幕高度的第一个值

不要使用推荐的方法，如-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的，也许是苹果偶然采用的，作为下巴/高度计算的修复?

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

在我的应用程序，我这样做(typescript和嵌套postcss，所以改变相应的代码):

const appHeight = () => {
    const doc = document.documentElement
    doc.style.setProperty('--app-height', `${window.innerHeight}px`)
}
window.addEventListener('resize', appHeight)
appHeight()

在你的css中:

:root {
    --app-height: 100%;
}

html,
body {
    padding: 0;
    margin: 0;
    overflow: hidden;
    width: 100vw;
    height: 100vh;

    @media not all and (hover:hover) {
        height: var(--app-height);
    }
}

它至少可以在chrome手机和ipad上运行。不工作的是，当你添加你的应用程序到iOS的主屏幕上，并改变方向几次-以某种方式缩放级别混乱的innerHeight值，我可能会发布一个更新，如果我找到一个解决方案。

Demo

@nils解释得很清楚。

接下来呢?

我只是回到使用相对'经典' %(百分比)在CSS。

实现一些东西通常比使用vh更费力，但至少，你有一个相当稳定的解决方案，它可以跨不同的设备和浏览器工作，没有奇怪的UI故障。

尝试html, body {height: 100%}在移动设备上达到100vh的效果。