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 等这样怪异的手机屏幕，本文完。