背景：

? ? ? ?目前公司開發(fā)商城小程序，對于iOS要設(shè)置底部安全距離，否則底部會被黑條遮擋

技術(shù)方案：

1、蘋果官方推薦：使用env()，constant()來適配，env()和constant()，是IOS11新增特性，Webkit的css函數(shù)，用于設(shè)定安全區(qū)域與邊界的距離，有4個預(yù)定義變量：
? ? ? ?safe-area-inset-left：安全區(qū)域距離左邊邊界的距離
? ? ? ?safe-area-inset-right：安全區(qū)域距離右邊邊界的距離
? ? ? ?safe-area-inset-top：安全區(qū)域距離頂部邊界的距離
? ? ? ?safe-area-inset-bottom ：安全距離底部邊界的距離

針對于env()和constant()函數(shù)有兩個必要的使用前提：

（1）網(wǎng)頁需設(shè)置viewport-fit=cover

（2）小程序viewport-fit默認(rèn)是cover

fix：

在IOS11.2系統(tǒng)以前，可以使用constant()函數(shù)，但是在IOS11.2系統(tǒng)以后，這個函數(shù)就被廢棄了，被env()函數(shù)替代了。官方原話如下：

The env() function shipped in iOS 11 with the name constant(). Beginning with Safari Technology Preview 41 and the iOS 11.2 beta, constant() has been removed and replaced with env(). You can use the CSS fallback mechanism to support both versions, if necessary, but should prefer env() going forward.

繼而在做屏幕適配時，需同時適配：

padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/ padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/

注意：env()和constant()需要同時存在，且順序不能調(diào)換

2、如果不處理ios底部安全距離兼容問題，則會類似如下圖所示那樣：

（1）

（2）

fix：

? ? ?在處理iOS兼容的同時，要注意安卓正常的顯示，所以如果原本的需求有距離底部邊距的需求，出了要做ios的適配，還要正常寫邊距值，這樣ios和安卓才能正常適配

.no-datapadding-bottom env(safe-area-inset-bottom) // 適配iospadding 40rpx 0 60rpx // 需求對底部要求有邊距，ios和安卓顯示正常

類似效果：

總結(jié)

以上是生活随笔為你收集整理的ios底部安全距离的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。