iphoneX底部固定定位兼容处理

问题和解决原理: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即可

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
禁止转载,如需转载请通过简信或评论联系作者。