iPhoneX 等刘海屏手机的适配方案之一

[mcya]

iPhoneX 等刘海屏手机的适配方案之一

本博客提出的解决方案是，开启沉浸式状态栏。

---

APP打包使用工具Hbuilder

---

配置 manifest.json 配置文件

（一）plus配置: 添加 statusbar launchwebview

"plus": {
     "statusbar": {
        "immersed": true /*开启沉浸式状态栏*/
    },
    "launchwebview": {
        "statusbar": {
            "background": "#51A7FE" /*设置状态栏的颜色，一般是跟头部的颜色一样*/
        }
    },
}

（二） 如果 apple 中配置 UIReserveStatusbarOffset 需注释

 "apple": {
    /* "UIReserveStatusbarOffset":false */
},

（三）如果 google 中配置 ImmersedStatusbar 需注释

"google": {
    /* "ImmersedStatusbar":true, */
},

结束语

关于iPhone X的适配问题，还有其他的解决方案，如:

最粗糙的做法，直接在meta标签，改变viewport-fit值。viewport-fit=auto、viewport-fit=contain.代价是：你的状态栏是默认系统颜色，而不是你APP的颜色。

---

通过设置viewport-fit=cover，padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);

---

最后，大吉大利，今晚没bug!