如何解决safari浏览器100vh有滚动条问题

事件起因：制作一直全屏的海报，将一张图片缩放至满屏。

但宽高分别设置为100vw和100vh后，发现safari浏览器纵向产生了滚动条，原因是safari和其它浏览器处理不同。
safari的100vh是包含地址栏和功能列的，而其它浏览器100vh才是用户浏览器真正的可见区域(见下图)

image.png

为此，比较好的解法方法就是通过js，通过innerHeight重新定义一个变量代替vh。
(innerHeight属性：窗口中文档显示区域的高度，不包括菜单栏、工具栏等部分。该属性可读可写。IE不支持该属性，IE中body元素的clientHeight属性与该属性相同。)

css:

.wrap {
    height: 100vh; /*給 Safari 以外的瀏覽器讀取*/
    height: calc(var(--vh, 1vh) * 100);
}

JavaScript：

function safariHacks() {
    let windowsVH = window.innerHeight / 100;
    document.querySelector('.wrap').style.setProperty('--vh', windowsVH + 'px');
    window.addEventListener('resize', function() {
        document.querySelector('.wrap').style.setProperty('--vh', windowsVH + 'px');
    });
}

safariHacks();
在页面didmount的时候执行safariHacks方法

有一个专门修复100vh问题的postcss插件：postcss-100vh-fix

补充知识：

var() 函数

body {
  --foo: #7F583F;
  --bar: #F7EFD2;
}

a {
  color: var(--foo);
  text-decoration-color: var(--bar);
}

上面代码中，body选择器里面声明了两个变量：--foo和--bar。

它们与color、font-size等正式属性没有什么不同，只是没有默认含义。所以 CSS 变量（CSS variable）又叫做"CSS 自定义属性"（CSS custom properties）。因为变量与自定义的 CSS 属性其实是一回事。

你可能会问，为什么选择两根连词线（--）表示变量？因为$foo被 Sass 用掉了，@foo被 Less 用掉了。为了不产生冲突，官方的 CSS 变量就改用两根连词线了
var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。

color: var(--foo, #7F583F);

参考资料：
https://ithelp.ithome.com.tw/articles/10249090
https://www.bram.us/2020/05/06/100vh-in-safari-on-ios/
https://github.com/postcss/postcss-100vh-fix
https://juejin.cn/post/6844904166322601997
https://www.ruanyifeng.com/blog/2017/05/css-variables.html（CSS 变量）