iphone（普通屏、刘海屏）、android（奇形怪状屏）H5页面适配

混合开发中，状态栏+顶部标题栏由H5页面做。此篇文章将介绍如何动态设置H5高度以保证与APP端一致。
以及iphoneX 、iphoneXS、iphoneXSMax、iphoneXR这几种机型的适配。

默认高度

状态栏20px + 顶部栏标题44px

android机型

通过桥接js-sdk获取（详见桥接js-sdk）

if (YT.isAndroid) {
  YT.ready.then(function () {
    YT.getTitleHeight().then(function (res) {
      // res.status 顶部系统条高度
      // res.height 标题栏内容高度
      // res.total  两者总高度
      // res.fontSize 字体大小
      // res.version 安卓版本号
      // {'status':'顶部系统条高度','height':'title内容高度', version: '18|19|20...'}
    }
  }
}

iphone机型对比

1. 主流机型尺寸和像素

2. 屏幕组成

齐刘海(44px) + 安全区域 + 手势区域(34px)
齐刘海(44px) + 顶部栏标题44px

适配方案

1. viewport-fit

• viewport-fit=”contain”展示区域在安全区中，不包括齐刘海和底部手势区域
• viewport-fit=”cover”展示区域整个屏幕中，包括齐刘海和底部手势区域
  所以使用viewport-fit=”contain”就可以解决适配问题，将下面的代码放在标签中。

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

2. css媒体查询

/* x xs */
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  .has-header {
    padding-top: 88px;
  }
  .header {
    height: 88px;
    padding-top: 44px;
  }
}
/* xr */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
  .has-header {
    padding-top: 88px;
  }
  .header {
    height: 88px;
    padding-top: 44px;
  }
}
/* xs max */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
  .has-header {
    padding-top: 88px;
  }
  .header {
    height: 88px;
    padding-top: 44px;
  }
}
/* 12mini */
@media only screen and (device-width: 360px) and (device-height: 780px) and (-webkit-device-pixel-ratio: 3) {
  .has-header {
    padding-top: 88px;
  }
  .header {
    height: 88px;
    padding-top: 44px;
  }
}
/* 12 12pro */
@media only screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) {
  .has-header {
    padding-top: 88px;
  }
  .header {
    height: 88px;
    padding-top: 44px;
  }
}
/* 12promax */
@media only screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) {
  .has-header {
    padding-top: 88px;
  }
  .header {
    height: 88px;
    padding-top: 44px;
  }
}

3. js判断

通过window.navigator.userAgent、window.devicePixelRatio、window.screen三个属性来匹配

• iphone及刘海屏系列

  // iphone
  isIphone: (function () {
    return /iphone/gi.test(window.navigator.userAgent)
  })(),
  // 刘海屏
  isIphoneX:  (function () {
    var iphone = /iphone/gi.test(window.navigator.userAgent)
    var ratio = window.devicePixelRatio || 0
    var width = window.screen.width
    var height = window.screen.height
    // iPhone X、iPhone XS
    var isIPhoneX = iphone && ratio === 3 && width === 375 && height === 812;
    // iPhone XS Max
    var isIPhoneXSMax = iphone && ratio === 3 && width === 414 && height === 896;
    // iPhone XR
    var isIPhoneXR = iphone && ratio === 2 && width === 414 && height === 896;
    var isIPone12Mini = iphone && ratio === 3 && width === 360 && height === 780;
    var isIPone12AndPro = iphone && ratio === 3 && width === 390 && height === 844;
    var isIPone12ProMax = iphone && ratio === 3 && width === 428 && height === 926;
    var iphoneX = isIPhoneX || isIPhoneXSMax || isIPhoneXR || isIPone12Mini || isIPone12AndPro || isIPone12ProMax
    iphoneX && document.documentElement.classList.add("iphone-x");
    return iphoneX
  })(),