iphoneX底部固定定位兼容处理
2020-08-28 本文已影响0人
飞鹰_007
问题和解决原理：iPhoneX全面屏手机底部返回键悬浮占位且层级最高，媒体查询判断手机屏幕，底部固定定位元素向上偏移34px。
1.在项目中index.html的meta标签添加viewport-fit=cover
<meta name="viewport" content="viewport-fit=cover,width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
2.在公共css，common.css中加入
/* 适配iphoneX iphoneXS */
@media only screen and (device-width: 375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3) {
.compatibility {
padding-bottom:34px;
}
}
/* 适配iphoneXR iphoneXSMax */
@media only screen and (device-width: 414px) and (device-height:896px) and (-webkit-device-pixel-ratio:3) {
.compatibility {
padding-bottom:34px;
}
}
3.在脚部固定定位div上加class类名compatibility即可
