问题:

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 ;
}

对我来说，这种把戏成了一种工作:

height: calc(100vh - calc(100vh - 100%))

我通过将最外层的div放在position: absolute，然后设置高度为100%来解决这个问题:

CSS:

.outer {
    position: absolute;
    height: 100%;
}

HTML:

<div class="outer">
    <!-- content -->
</div>

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

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

对于我所创建的许多网站，客户端都会要求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规则仍然存在。

我提出了一个React组件——如果你使用React，请查看它，如果你不使用React，请浏览源代码，这样你就可以使它适应你的环境。

它将全屏div的高度设置为window。innerHeight，然后在窗口调整大小时更新它。