事件起因：制作一直全屏的海報(bào)鉴腻，將一張圖片縮放至滿屏。
但寬高分別設(shè)置為100vw和100vh后蜓席，發(fā)現(xiàn)safari瀏覽器縱向產(chǎn)生了滾動(dòng)條课锌，原因是safari和其它瀏覽器處理不同。
safari的100vh是包含地址欄和功能列的产镐，而其它瀏覽器100vh才是用戶瀏覽器真正的可見區(qū)域(見下圖)
為此癣亚，比較好的解法方法就是通過js，通過innerHeight重新定義一個(gè)變量代替vh述雾。
(innerHeight屬性：窗口中文檔顯示區(qū)域的高度，不包括菜單欄唆缴、工具欄等部分黍翎。該屬性可讀可寫。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的時(shí)候執(zhí)行safariHacks方法
有一個(gè)專門修復(fù)100vh問題的postcss插件：postcss-100vh-fix
補(bǔ)充知識(shí)：
var() 函數(shù)
body {
--foo: #7F583F;
--bar: #F7EFD2;
}
a {
color: var(--foo);
text-decoration-color: var(--bar);
}
上面代碼中，body選擇器里面聲明了兩個(gè)變量：--foo和--bar铛嘱。
它們與color袭厂、font-size等正式屬性沒有什么不同，只是沒有默認(rèn)含義纹磺。所以 CSS 變量（CSS variable）又叫做"CSS 自定義屬性"（CSS custom properties）。因?yàn)樽兞颗c自定義的 CSS 屬性其實(shí)是一回事蚓让。
你可能會(huì)問讥珍，為什么選擇兩根連詞線（--）表示變量？因?yàn)?foo被 Sass 用掉了衷佃，@foo被 Less 用掉了。為了不產(chǎn)生沖突锄列，官方的 CSS 變量就改用兩根連詞線了
var()函數(shù)還可以使用第二個(gè)參數(shù)惯悠，表示變量的默認(rèn)值。如果該變量不存在克婶，就會(huì)使用這個(gè)默認(rèn)值。
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 變量）
