全面屏手机把整个webview(包括状态栏)给H5的话,不对状态栏进行控制往往会有以下如图问题出现,这样头部的返回按钮置于页面的安全区外,无法进行操作。
一、设置网页在可视窗口的布局方式(重点是添加:viewport-fit=cover)
<meta name="viewport"
content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
二、把页面主体内容限定在安全区内
body {
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
padding-left: constant(safe-area-inset-left);
padding-left: env(safe-area-inset-left);
padding-right: constant(safe-area-inset-right);
padding-right: env(safe-area-inset-right);
}
注意:
如果页面头部用的是非定位的,页面的主体部分和按钮用的是absolute定位时,要记得给主体部分添加如下样式:
margin-top: constant(safe-area-inset-top);
margin-top: env(safe-area-inset-top);
或者:
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);