- step1、添加头
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no, viewport-fit=cover">
- step2、添加css
// 方案1：媒体查询（推荐）
@media only screen and (device-width: 375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3) {
padding-bottom:20px;
}
// 方案2：属性支持判断
@supports(bottom:constant(safe-area-inset-bottom)) {
selector{
padding-bottom:constant(safe-area-inset-bottom);
padding-bottom:calc(30px(假设值) + constant(safe-area-inset-bottom)); //根据实际情况选择适配方法
}
}
// Tips:supports语法
@supports(prop:value) {
/* 各种样式 */
}
注意：
1、对于固定在底部的元素，需设置bottom至安全区域以外
附：iPhone系列手机参数
iPhone系列手机参数
