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!