前端 iPhoneX适配

一、背景

开发混合App，关于iPhoneX刘海的适配，应该是前端H5做，还是原生APP做呢？个人觉得原生APP做比较靠谱，毕竟原生知道是什么机型，而CSS媒体查询觉得很难做到完美（问题一是工具条高度难以确定，问题二可能存在相同的媒体参数）。但是由于iOS原生开发的适配也老存在问题，交流麻烦，所以尝试在H5上做适配，希望不足的可以得到建议。

二、方案

百度后，总结主要有两种想法。
方案1（本文采用）：使用@media 媒体查询尺寸

iPhone各机型的开发尺寸

1125 × 2436 iPhoneX, XS Default-812h@3x
828 x 1792 iPhoneXR Default-828h@2x
1242 x 2688 iPhoneX Max Default-1242h@3x

方案2（不可用）：根据是否有支持ios11 增加新特性安全区域来判断是不是iphoneX，判断的是系统，不是机型，所以对于其他安装了iOS11以上的机子会有问题。

三、代码实现

1、iOS开发人员提供全屏的webview
2、viewport-fit meta标签设置cover。

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

3、媒体查询

html{
    height: 100%;
    width: 100%;
    overflow: hidden;
    /*和header背景颜色一样，使工具条和header背景颜色一样*/
    background-color: #fff !important;
  }

  /*top 这里直接置顶，是因为项目需求。若要为工具条的高度，比较麻烦，所以建议原生做适配*/
  body {
    overflow: hidden;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

/*兼容iphoneX*/
/*判断是否是iphoneX，使用@media 媒体查询尺寸*/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    body {
      top: constant(safe-area-inset-top);
      bottom: constant(safe-area-inset-bottom);
      left: constant(safe-area-inset-left);
      right: constant(safe-area-inset-right);
    }
  }

 /*方案2：不可用*/
 /*@supports 隔离兼容模式，根据是否有支持ios11 增加新特性来判断是不是iphoneX*/
  /* @supports (bottom: constant(safe-area-inset-top)) or (bottom: env(safe-area-inset-top))  {
    body {
      top: constant(safe-area-inset-top);
      bottom: constant(safe-area-inset-bottom);
      left: constant(safe-area-inset-left);
      right: constant(safe-area-inset-right);
    }
  }*/

四、兼容前和兼容后对比

兼容前和兼容后对比

五、待改进

本代码只媒体查询iphoneX，对于XS、X MAX、XR还需要增加媒体查询。

六、相关资料

对于iphoneX头部遮挡问题，苹果公司增加了一种方法来将安全区域布局指南暴露给CSS。他们添加了一个类似于CSS变量的概念，称为CSS常量。这些像系统设置的CSS变量，不能被覆盖，可以通过CSS中的constant()函数来访问，该函数已被提交给CSS工作组进行标准化。

1、 iOS11中viewport-fit三个取值：

值	描述
auto	页面内容显示在safe area内。viewprot-fit:auto等同于viewport-fit:contain
contain	页面内容显示在safe area内。viewport-fit:contain
cover	页面内容充满屏幕。viewport-fit:cover

2、 4个布局常数：生效前提是viewport-fit:cover
constant(safe-area-inset-top)：从视口顶部的安全区域插入量(以CSS像素为单位)。
constant(safe-area-inset-bottom)：从视口底部的安全区域插入量(以CSS像素为单位)。
constant(safe-area-inset-left)：从视口左侧的安全区域插入量(以CSS像素为单位)。
constant(safe-area-inset-right)：从视口右侧的安全区域插入量(以CSS像素为单位)。

参考资料：
关于H5页面在iPhoneX适配
iPhone X的Web设计
iPhone X适配没那么复杂，但也不是看上去这么简单
剖析 iOS 11 网页适配问题
iPhone X(10)屏幕分辨率与适配
iPhone X 适配手Q H5 页面通用解决方案