需求:h5页面顶部图片要沉浸到状态栏。
1.html中设置 meta viewport-fit=cover"
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui,viewport-fit=cover">
- 调整页面距离屏幕上下的距离env()这些可以作为padding、margin、top等。
body{
padding-top: env(safe-area-inset-top);
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
}
3.问题:当设置meta viewport-fit=cover" 时,高度100%,会导致页面实际高度只有苹果安全区域(就是不设置meta viewport-fit=cover"时可以操作的部分)的高度。百度的解决方法是用媒体查询修改body\html的高度,然而并不行。
解决:需要让原生的webView设置,然后h5按照第二步的修改样式。
if #available(iOS11.0, *) {
self.webview.scrollView.contentInsetAdjustmentBehavior= .never;
}
网友评论