iPhoneX适配问题 iOS刘海屏 安全区域处理 IOS小黑条处理 IOS兼容处理

前言

iPhoneX去掉了底部的按键，增加了小黑条，这就使得网页工作者需要做一下适配。

适配前需要了解的几个关键字

安全区域

安全区域是指不受圆角、刘海屏、小黑条影响的区域，所以要确保你的内容显示在安全区域内

官网的图片解释，具体信息可移步human-interface-guidelines/ios/visual-design

viewport-fit

这是iOS11的新增特性，为了兼容刘海屏新推出的对viewport meta的一个扩展，属性值有三个。

• cantain 可视窗口完全显示网页内容(左)
• cover 网页内容完全覆盖可视窗口(右)
• auto 效果与contain 相同
  
  详细解释viewport-fit-descriptor

env() 和 constant()

iOS11 新增特性，Webkit 的一个 CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量：

• safe-area-inset-left：安全区域距离左边边界距离
• safe-area-inset-right：安全区域距离右边边界距离
• safe-area-inset-top：安全区域距离顶部边界距离
• safe-area-inset-bottom：安全区域距离底部边界距离
  constant()是兼容< iOS11.2
  env() 兼容 >= ios11.2

适配的方法

第一步 设置网页在可视区的布局方式，增加viewport-fit属性 viewport-fit=cover

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

第二步 页面主体内容限制在安全区域内

body {
     
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

第三步 fixed元素的适配

通过增加内边距的方式或者设置bottom值

{
     
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

如果有预设的边距值，可以使用calc()进行计算

{
     
  padding-bottom: calc(60px(假设值) + constant(safe-area-inset-bottom));
  padding-bottom: calc(60px(假设值) + env(safe-area-inset-bottom));
}

这样处理基本就没问题。
文章原出处凹凸实验室