問題和解決原理: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即可