NO IMAGE

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=autoviewport-fit=contain.代價是:你的狀態列是預設系統顏色,而不是你APP的顏色。


通過設定viewport-fit=coverpadding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);


最後,大吉大利,今晚沒bug!