目錄前言方法一方法二前言

關(guān)于這個iPhone X底部安全區(qū)域問題，這個一直困擾了我好久，前前后后因?yàn)檫@個提交了好多次代碼也在網(wǎng)上找了好多解決方案，今天我在這兒簡單總結(jié)一下，一來也方便自己以后查筆記，二來也希望方便后來人，我的終究目標(biāo)是愿世界上永遠(yuǎn)沒有難解決的bug，哈哈哈當(dāng)然是開玩笑的，言歸正傳，下面就給大家來介紹幾種解決iPhone X底部安全區(qū)域的問題。

方法一

mainfest.json 文件 app-plus 節(jié)點(diǎn)下配置 safearea

'safearea': { 'background': '#CCCCCC', 'bottom': { 'offset': 'auto' } } //以上代碼意思設(shè)置安全區(qū)域居中，設(shè)置顏色為灰色為（#CCCCCC）方法二

或者mainfest.json 文件 app-plus 節(jié)點(diǎn)下配置 safearea，具體代碼如下：

'safearea': { 'bottom': { 'offset': 'none' } }//以上代碼意思為不使用原生占位

然后具體的頁面可以以如下方式配置

html部分

<view class='iphonex'></view>//該view標(biāo)簽為該頁面最大的盒子

css部分

.iphonex{/* iphonex 等安全區(qū)設(shè)置，底部安全區(qū)適配 *//* #ifndef APP-NVUE */margin-bottom: 0;margin-bottom: constant(safe-area-inset-bottom);margin-bottom: env(safe-area-inset-bottom);/* #endif */ }

或者css部分為如下代碼：

.iphonex{/* iphonex 等安全區(qū)設(shè)置，底部安全區(qū)適配 *//* #ifndef APP-NVUE */margin-bottom: 0;margin-bottom: constant(safe-area-inset-bottom);margin-bottom: env(safe-area-inset-bottom);/* #endif */ }

以上兩種CSS編寫方式可以根據(jù)具體需求自行選擇

我們這里還可以用另一種不同的方法，來解決上述問題：

html部分

<view> <view class='iphonex'></view></view>//帶有iPhoneX的class類放在頁面最底部

css部分

.iphonex{/* iphonex 等安全區(qū)設(shè)置，底部安全區(qū)適配 *//* #ifndef APP-NVUE */height: 0;height: constant(safe-area-inset-bottom);height: env(safe-area-inset-bottom);width: 750rpx;background-color: #FFFFFF;/* #endif */ }

多的我不用說了,我就說說background-color,它可以配置你喜歡的顏色(主題色)相對靈活

以上就是uni-app的iPhonex底部安全區(qū)域解決方案的詳細(xì)內(nèi)容，更多關(guān)于uni-app iPhonex底部安全的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！