app 内嵌H5 底部头部兼容

Posted 2021-09-04 Tong_sunshine

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

viewport 可以设置的选项就是 viewport-fit,它有三个可选值：
contain: The viewport should fully contain the web content. 可视窗口完全包含网页内容
cover: The web content should fully cover the viewport. 网页内容完全覆盖可视窗口
auto: The default value, 同contain的作用

通过给页面设置viewport-fit=cover，可以将页面的布局区域延伸到页面顶部和底部。

webview内嵌h5底部还没有到底得加以下代码

body {
padding-top: env(safe-area-inset-top); //为导航栏+状态栏总高度（88px）
padding-left: env(safe-area-inset-left); //如果未竖屏时，为0
padding-right: env(safe-area-inset-right); //如果未竖屏时，为0
padding-bottom: env(safe-area-inset-bottom); //为底部圆弧高度（34px）
}