事件起因：制作一直全屏的海报，将一张图片缩放至满屏。
但宽高分别设置为100vw和100vh后，发现safari浏览器纵向产生了滚动条，原因是safari和其它浏览器处理不同。
safari的100vh是包含地址栏和功能列的，而其它浏览器100vh才是用户浏览器真正的可见区域(见下图)
为此，比较好的解法方法就是通过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 变量）
