image.png
產(chǎn)品提出來(lái)砍鸠，iPhoneX按鈕和底部需要留出一部分空白湃望，而其他機(jī)型正常現(xiàn)實(shí)院喜。
想法很簡(jiǎn)單亡蓉，使用媒體查詢 media query 按照 iphone x 的尺寸（375px * 812px）做處理即可。
但是這并不能解決xr xs xsmax 等分辨率不同的機(jī)型喷舀。
通過(guò)查閱資料砍濒，找到了一種解決方法
在 ios 11 中我們可以使用 viewport-fit=cover + safe-area-inset-*。
1硫麻、在template文件中添加viewport-fit=cover
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,viewport-fit=cover">
2爸邢、在需要的代碼上添加constant(safe-area-inset-bottom)以及env(safe-area-inset-bottom)即可。
計(jì)算 底部非安全區(qū)域距離 與 底部按鈕高度 之和 來(lái)做為 bottom 值
.btn {
bottom: calc(constant(safe-area-inset-bottom) + 68px);
bottom: calc(env(safe-area-inset-bottom) + 68px);
}
image.png
然后就達(dá)到預(yù)期結(jié)果了拿愧。
接著在安卓手機(jī)vivo x9甲棍、努比亞z20，魅族16P手機(jī)出現(xiàn)了確認(rèn)信息被遮住的問(wèn)題
image.png
應(yīng)該是安卓不兼容constant(safe-area-inset-bottom)方法的原因赶掖，添加默認(rèn)距離即可感猛。
.btn {
bottom: 68px;
bottom: calc(constant(safe-area-inset-bottom) + 68px);
bottom: calc(env(safe-area-inset-bottom) + 68px);
}
以上即完美解決了iphonex底部添加安全距離的問(wèn)題。
