小程序中 如何适配 IPhone X 系列

[JslinSir]

苹果 websites 设计规范

安全区示意图

小程序中适配

padding-bottom: constant( safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env( safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */

注意：env() 跟 constant() 需要同时存在，而且顺序不能换

使用 @supports 隔离兼容样式

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
.iphone-x {
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
   }
}

效果展示

同样也支持 calc 写法

非x 系列设备，距离底部距离

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
.iphone-x {
      padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
      padding-bottom: calc(10rpx  + env(safe-area-inset-bottom));
   }
}

[JslinSir]

H5 适配 IPhone X 系列

• 在 meta 标签中增加 viewport-fit=cover

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

• 设置body 安全区

 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);
}