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

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

方法一

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' } }//以上代碼意思為不使用原生占位

然后具體的頁(yè)面可以以如下方式配置

html部分

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

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ù)具體需求自行選擇

我們這里還可以用另一種不同的方法，來(lái)解決上述問(wèn)題：

html部分

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

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 */ }

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

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