分类: 移动web, 前端, JavaScript, 浏览器兼容作者: mukti　　时间: 2021-04-01 12:06:33 (星期四)

iPhone 从 X 开始使用全面屏，浏览网页的时候底部会有一条遮住可视区域，为了避免H5页面被iPhone底部条遮住，可以采取以下方案。

iPhone自适应底部

首先，iPhone自带了屏幕安全区域的处理策略，可以使用constant和env两个css特性来获取底部的安全距离，然后通过@supports来做兼容，通过覆盖样式对底部单独处理：

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
  /* 如果浏览器支持安全区域底部距离，
     则可以为需要吸底的元素单独规定样式，
     如果该 class 还有其它样式，要将本段代码放在其它样式后面！
     取值如下：
  */
  .class-name {
    padding-bottom: constant(safe-area-inset-bottom);  /* 当然也可以写 margin、bottom …… */
    padding-bottom: env(safe-area-inset-bottom);
  }
}

判断iPhone型号

因为以上CSS方法在iOS微信浏览器中不生效，需要手动判断iPhone型号，然后就可以在微信浏览器中，针对全面屏的iPhone做单独处理。

注意，因为微信在网页切换时，底部会出现导航条，目前还没有办法让H5感知是否出现导航条，所以对导航条无法处理，我们通常的做法是，不管底部是否出现微信自带导航，在iPhone的微信中浏览H5，底部永远留出20px安全区域。

以下为全面屏iPhone判断方法：

// 判断iPhone型号
// https://feizhaojun.com/?p=2650
var ua = window.navigator.userAgent;
var deviceScreen = window.screen.width + ',' + window.screen.height;
var iPhoneScreen = [
  '375,812',  // X、Xs、11 Pro
  '414,896',  // XR、11、Xs Max、11 Pro Max
  '390,844',  // 12、12 Pro
  '428,926'  // 12 Pro Max
];
if (ua.indexOf('MicroMessenger') > -1 && !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) && iPhoneScreen.indexOf(deviceScreen) > -1) {
  // do something for iPhone 全面屏
}

https://feizhaojun.com/demo/safe-area.html

插播一个征婚广告~~

也是受朋友之托。

>_<

女，运营妹，23岁，未婚，身高167cm，体重48KG，山东青岛。

目前在阿里巴巴工作，负责支付宝相关业务，工号 519720401 支付宝搜索工号可见照片。

漂亮大方，爱好读书、健身、游泳、吃鸡。

青岛有房一套，有车。

父母退休，家庭不拜金、人务实，一直没有合适的男朋友。

她本人要求不高，只要对她真心好就行。

您的赞助将会鼓励作者技术文章创作以及支持本站运维。

Follow any responses to this post with its comments RSS feed. You can post a comment or trackback from your blog.