image.png

產(chǎn)品提出來，iPhoneX按鈕和底部需要留出一部分空白，而其他機(jī)型正?，F(xiàn)實(shí)。

想法很簡單，使用媒體查詢 media query 按照 iphone x 的尺寸（375px * 812px）做處理即可。

但是這并不能解決xr xs xsmax 等分辨率不同的機(jī)型。

通過查閱資料，找到了一種解決方法

在 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ū)域距離 與 底部按鈕高度 之和 來做為 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)信息被遮住的問題

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底部添加安全距離的問題。