Skip to content

H5处理全面屏iPhone底部边距

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 支付宝搜索工号可见照片。

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

青岛有房一套,有车。

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

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

 

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

发表评论

Your email is never published nor shared. Required fields are marked *


TOP