h5 在苹果浏览器中需要适配底部
如图按钮适配
H5上适配安全区域采用viewport+constant+env方案
需要将viewport设置为cover,env和constant才能生效。设置代码如下:
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
viewport-fit 默认有3个值:contain:可视窗口完全包含网页内容
cover:网页内容完全覆盖可视窗口
auto:默认值,此值不影响初始布局视图端口,并且整个web页面都是可查看的
小程序 安全区适配
.buttom {
padding-bottom: 100rpx;
padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
}