背景
從蘋果手機的iphoneX及以后映屋，手機的屏幕頂部就出現(xiàn)了“齊劉浩槠瘢”和底部小黑橫條的樣式。不少app直接兼容了里面的webview的樣式面睛，屏幕在豎屏下頂部往往是導(dǎo)航欄絮蒿，不會遮住webview里面的內(nèi)容，而底部則從app層面設(shè)置了底部高度叁鉴，使webview底部不在黑色橫條區(qū)域內(nèi)土涝，這樣就不會阻礙展示webview里面的內(nèi)容。
但是幌墓，每個app千差萬別但壮，里面的webview也就展現(xiàn)不一，如果沒有app底部高度常侣，那么webview里面的底部內(nèi)容就會被小黑條遮擋蜡饵。從網(wǎng)頁樣式兼容性來說，需要兼容iphoneX后特有的“齊劉焊焓”和底部小黑橫條樣式溯祸，又不影響以前機型的樣式。
安全區(qū)域
首先了解一下iphoneX的安全區(qū)域，下圖藍色部分為安全區(qū)域焦辅，而兩邊的margin博杖、頂部齊劉海和底部小黑條區(qū)域都屬于不安全區(qū)域，屬于內(nèi)容有可能會被遮擋的區(qū)域筷登，那么我們需要控制我們的內(nèi)容在安全區(qū)域內(nèi)剃根。
兼容方案
所幸，在iphoneX出來的時候仆抵，官方的ios11系統(tǒng)也提供了WebKit Api去兼容這種樣式差異跟继。
第一步：設(shè)置viewport-fit屬性
<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>
viewport-fit有auto，contain镣丑，fit三個屬性值舔糖，默認是auto。
contain: 可視窗口完全包含網(wǎng)頁內(nèi)容莺匠， 頁面內(nèi)容顯示在safe area內(nèi)
cover：網(wǎng)頁內(nèi)容完全覆蓋可視窗口金吗，頁面內(nèi)容充滿屏幕
auto：默認值，跟 contain 表現(xiàn)一致
默認情況下趣竣，safari展示的是viewport-fit=contain的情況摇庙，如下圖，在橫屏下遥缕，webview里的頁面內(nèi)容在安全區(qū)域內(nèi)卫袒，但是從樣式上看，這不太美觀单匣，并且沒有利用好iphoneX賦予的全屏特性夕凝。
設(shè)置viewport-fit=cover后，如下圖户秤，內(nèi)容全屏展示码秉，但是左邊的內(nèi)容被“齊劉海”擋住了鸡号。
為了解決這個問題转砖，ios11中的WebKit包括了一個新的CSS函數(shù)env()，以及四個預(yù)定義的環(huán)境變量safe-area-inset-left鲸伴、safe-area-inset-right府蔗、safe-area-inset-top和safe-area-inset-bottom。這四個環(huán)境變量代表了距離安全區(qū)域的距離汞窗。
- safe-area-inset-left：安全區(qū)域距離左邊邊界距離
- safe-area-inset-right：安全區(qū)域距離右邊邊界距離
- safe-area-inset-top：安全區(qū)域距離頂部邊界距離
- safe-area-inset-bottom：安全區(qū)域距離底部邊界距離
ios11.2以前用的是constants()函數(shù)姓赤，后來在ios11.2版本改成了env()函數(shù)，為了兼容兩者杉辙，可以都寫上模捂。
第二步：設(shè)置安全區(qū)域距離
.post {
padding: 12px;
padding-left: constants(safe-area-inset-left); // ios<11.2
padding-left: env(safe-area-inset-left); // ios>=11.2
}
這樣，當(dāng)出現(xiàn)不在安全區(qū)域時蜘矢，env(safe-area-inset-left)不等于0狂男，那么就會導(dǎo)致在padding-left上設(shè)置了一個安全距離，從而使內(nèi)容不被遮擋品腹。
上面是被“齊劉横常”擋住的情況，實際比較多的情況用在底部小黑條擋住懸浮bar的情況舞吭，加上屬性支持判斷@supports蛋辈，只有env(safe-area-inset-bottom)被瀏覽器支持的時候才會執(zhí)行里面的css轻专。
.bottom-bar{
width: 100%;
position: fixed;
bottom: 0;
background: blue;
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
.bottom-bar {
padding-bottom: constant( safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
}
注：微信內(nèi)的webview是默認viewport-fit=cover的狀態(tài)的，只需要設(shè)置安全距離即可，微信小程序同樣適用上述方案襟诸。
iphonex以上手機非矩形界面適配前：
適配后，iphonex以上手機非矩形界面自動適配底部高度：
不是不規(guī)則矩形的情況：
總結(jié)
手機在更新?lián)Q代瑟蜈，隨著手機樣式發(fā)生改變爽哎，樣式兼容問題也接踵而至，但是問題的制造者往往也是問題的解決者衷旅，開發(fā)者也不用焦慮找不到解決方案捐腿，從而使我們更專注業(yè)務(wù)邏輯本身。
