iPhoneX适配

javascript
  目录
  1. 1. iPhoneX适配
    1. 1.1. 基础设备信息
      1. 1.1.1. 关于iPhone的一些基础参数
      2. 1.1.2. iPhoneX设备信息
    2. 1.2. iPhoneX适配
      1. 1.2.1. 适配方案viewport-fit
      2. 1.2.2. 适配方案css constant()
      3. 1.2.3. 适配方案媒体查询
    3. 1.3. 总结
      1. 1.3.1. viewport-fit:contain
      2. 1.3.2. viewpoer-fit: cover + css canstant()
      3. 1.3.3. css的媒体查询

h5在iPhoneX中的页面兼容处理

iPhoneX适配

基础设备信息

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

关于iPhone的一些基础参数

img

iPhoneX设备信息

iPhoneX屏幕组成：上部齐刘海sensor housing（44pt） + 安全区域safe area + 底部手势区域Home Indicator（34pt）
safe area（安全区域）
img
安全区域以外的是上部“齐刘海” 和 下部“手势区域”，一般情况下，我们都会在安全区域（safe area）中进行页面的编写；

iPhoneX适配

适配方案viewport-fit

1
<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()

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，这四个值需要设置，页面才会显示在安全区域中，设置如下：

1
2
3
4
5
6
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       
}

适配方案媒体查询

1
2
3
@media only screen and (device-width: 385px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){
  // iphoneX css部分
}

总结

viewport-fit:contain

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

viewpoer-fit: cover + css canstant()

1
<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">
1
2
3
4
5
6
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       
}

css的媒体查询

1
2
3
@media only screen and (device-width: 385px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){
  // iphoneX css部分
}
  移动端   兼容性