*iPhoneX 安全区域 safe-area-inset-样式不生效
解决办法: 添加 meta name=“viewport” 中增加viewport-fit=cover内容
//viewport-fit=cover
<meta name="viewport" id="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, viewport-fit=cover">
- H5页面在ios上面底部安全区域按钮样式兼容
padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
注意:样式父元素不能有高度,可以给子元素高度
.vipBtn {
padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
position: fixed;
width: 100%;
bottom: rem(0px);
left: rem(0px);
background-color: #fff;
.btn {
margin: rem(0px) rem(25px);
color: #fff;
font-size: rem(32px);
text-align: center;
z-index: 999;
height: rem(100px);
line-height: rem(100px);
}
}