关于iPhoneX适配（h5）

1. 基础设备信息

• 首先在了解iPhoneX适配之前，需要了解关于iPhoneX设备的一些基础
  1） 关于iPhone的一些基础参数

  
  设备信息.png
  

  2） iPhoneX设备信息

  • iPhoneX屏幕组成：上部齐刘海sensor housing（44px） + 安全区域safe area + 底部手势区域Home Indicator（34px）

  • safe area（安全区域）

    
    safeArea.png
  • 安全区域以外的是上部“齐刘海” 和 下部“手势区域”，一般情况下，我们都会在安全区域（safe area）中进行页面的编写；

2. iPhoneX适配

1）适配方案viewport-fit、css constant()、媒体查询

<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">

• viewport-fit有两个值，contain和 cover
  默认是contain，页面内容显示在safe area中（不包括上部的齐刘海和下部的手势区域）
  cover值：页面内容充满屏幕
• css constant()
  有四个值：safe-area-inset-top , safe-area-inset-left , safe-area-inset-right , safe-area-inset-bottom
  1)当viewport-fit:contain，上面这个四个值无效
  2)当viewport-fit:cover，这四个值需要设置，页面才会显示在安全区域中，设置如下：

body {
    padding-top: constant(safe-area-inset-top);   //为导航栏+状态栏的高度 88px            
    padding-left: constant(safe-area-inset-left);   //如果未竖屏时为0                
    padding-right: constant(safe-area-inset-right); //如果未竖屏时为0                
    padding-bottom: constant(safe-area-inset-bottom);//为底下圆弧的高度 34px       
}

• 媒体查询

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){}

3. 总结

• 一般情况下iPhoneX适配方法有三种

1. 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. viewpoer-fit: cover + css canstant()

<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">

body {
    padding-top: constant(safe-area-inset-top);   //为导航栏+状态栏的高度 88px            
    padding-left: constant(safe-area-inset-left);   //如果未竖屏时为0                
    padding-right: constant(safe-area-inset-right); //如果未竖屏时为0                
    padding-bottom: constant(safe-area-inset-bottom);//为底下圆弧的高度 34px       
}

3. css的媒体查询

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){}

• 以上，都是个人开发过程中的总结经验，希望帮助到你们