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

版权声明：原创不易，如需转载，请注明出处。有梦想地需要你的一个赞(顶)。 https://blog.csdn.net/genius_yym/article/details/80707556

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!