事件起因：制作一直全屏的海報，將一張圖片縮放至滿屏。
但寬高分別設置為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 變量）
