uni-app的iPhonex底部安全區域解決方案

目錄 前言 方法一 方法二 前言 關于這個iPhone X底部安全區域問題，這個一直困擾了我好久，前前后后因為這個提交了好多次代碼也在網上找了好多解決方案，今天我在這兒簡單總結一下

目錄

• 前言
• 方法一
• 方法二

前言

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

方法一

mainfest.json 文件 app-plus 節點下配置 safearea

"safearea": {  
    "background": "#CCCCCC",  
    "bottom": {  
        "offset": "auto"  
    }  
} 
//以上代碼意思設置安全區域居中，設置顏色為灰色為（#CCCCCC）

方法二

或者mainfest.json 文件 app-plus 節點下配置 safearea，具體代碼如下：

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

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

html部分

<view class="iphonex"></view>
//該view標簽為該頁面最大的盒子

css部分

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

或者css部分為如下代碼：

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

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

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

html部分

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

css部分

    .iphonex{
        /* iphonex 等安全區設置，底部安全區適配 */
        /* #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底部安全區域解決方案的詳細內容，更多關于uni-app iPhonex底部安全的資料請關注技圈網其它相關文章！