iPhoneX及以上类型的手机前端页面适配

该文章发布于 ,归类于 未分类。

在iPhoneX这种怪异的屏幕上,由于存在顶部的刘海和底部的横条,所以,使用普通的布局方式,页面的顶部和底部可能会被盖住。对于这种问题,还好苹果给出了解决方案,提出了安全区的概念。

首先需要在meta标签中添加viewport-fit=cover这个选项,如下。

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

然后就可以设置安全区的内padding边距,以保证内容能显示在安全区中。需要注意的是,必须添加viewport-fit=cover属性,安全区才会生效。

body {
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: constant(safe-area-inset-left);
  padding-left: env(safe-area-inset-left);
  padding-right: constant(safe-area-inset-right);
  padding-right: env(safe-area-inset-right);
}

在IOS11中,新增了上面几个safe-area-inset-top这样的属性,在iOS11.2之前,可以使用constant(),但是IOS11.2之后,这个属性就不支持了,所以需要使用env()来兼容。

然后使用媒体查询判断手机型号,来让iPhoneX、iPhoneXS等这样的手机使用上面的布局,而其他的不受影响。

// XS / XS Max / XR 适配
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3),
  only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3),
  only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
  /*头部适配*/
  .header-bar {
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
  }

  /*底部适配*/
  .footer-bar {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

手机尺寸如下所示(图片来源于网络)

这样,就适配了iPhoneX等这样怪异的手机屏幕,本文完。

相关文章