H5适配iphoneX底部 只需2步
首先我们要明白
iphoneX底部适配是要和H5页面的底部选项卡做兼容
所以我们要判断在iphoneX下
把选项卡底部到屏幕底部的中间部分自动填充
1.设置meta属性,在content下设置关键值 viewport-fit=cover
<meta name="viewport" content="viewport-fit=cover" />
2.底部选项卡判断(以下是关键步骤,其他样式省略)
// 设置固定定位,将bottom设置为0
.footerBox {
position:fixed;
bottom: 0;
}
// 判断iphoneX 将 footerBox 的 padding-bottom 填充到最底部
@supports (bottom: env(safe-area-inset-bottom)) {
.footerBox {
padding-bottom: env(safe-area-inset-bottom);
}
}
以上介绍了iphoneX的底部圆角区域填充适配最简方案
如果有更多想了解的请参考以下连接:
因篇幅问题不能全部显示,请点此查看更多更全内容