你可以试试min-height: -webkit-fill-available;而不是100vh。应该得到解决

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

这是一个众所周知的问题(至少在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

问题:

if ( refDOM.clientHeight != window.innerHeight )

解决方案:

refDOM.style.setProperty('--MYvh', window.innerHeight + 'px' ) ;

完成:

const mobileShit = function ( refDOM ) {
    console.log ( `refDOM.clientHeight : ${refDOM.clientHeight}` ) ;
    console.log ( `window.innerHeight : ${window.innerHeight}` ) ;
    if ( refDOM.clientHeight != window.innerHeight ) { // accounting for mobile
        refDOM.style.setProperty('--MYvh', window.innerHeight + 'px' ) ;
    }
} ;

CSS(通过脚本修改，是的，当任何事情发生变化时，你必须处理事件):

:root {
    --MYvh : 100vh ;
}

不幸的是，这个问题至今仍然存在。最大的误导是不可能用浏览器的设备工具栏来表示情况。

我刚刚解决了这个问题(在PC、iOS和android浏览器上进行了测试):

.your_class {
   height: 100vh,
   max-height: 100%, // <-- add the line
   ...some other props,
}

我希望它能节省你的时间。

因为我是新人，我不能对其他答案发表评论。

如果有人正在寻找一个答案，使这个工作(可以使用javascript -似乎需要使这个工作的时刻)，这种方法对我来说非常有效，它也说明了移动方向的变化。我使用Jquery的示例代码，但应该是可行的与vanillaJS。

-首先，我使用一个脚本来检测设备是触摸还是悬停。的例子:

if ("ontouchstart" in document.documentElement) {
    document.body.classList.add('touch-device');

} else {
    document.body.classList.add('hover-device');
}

这将根据稍后用于高度脚本的设备类型(悬停或触摸)向body元素添加类。

-接下来使用这段代码来设置设备在负载和方向变化时的高度:

if (jQuery('body').hasClass("touch-device")) {
//Loading height on touch-device
    function calcFullHeight() {
        jQuery('.hero-section').css("height", $(window).height());
    }

    (function($) {
        calcFullHeight();

        jQuery(window).on('orientationchange', function() {
            // 500ms timeout for getting the correct height after orientation change
            setTimeout(function() {
                calcFullHeight();
            }, 500);

        });
    })(jQuery);

} else {
    jQuery('.hero-section').css("height", "100vh");


}

-Timeout设置，以便设备在方向改变时正确计算新的高度。如果没有超时，根据我的经验，高度是不正确的。500毫秒可能有点过分，但对我来说很有效。

如果浏览器覆盖CSS的100vh，则-100vh在hover-devices上是一个备用选项。

看起来CSS修复是不可靠的，JS一个工作得很好，但元素在用户打开页面时跳跃。

我解决了这个问题使用JS从其他答案+淡出动画隐藏跳跃。

这并不适合所有的用例，但对于其中一些用例，比如必须在底部的按钮，可能是一个很好的解决方案。