iphone X 适配

viewport-fit

iOS11 新增特性，苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展，用于设置网页在可视窗口的布局方式，可设置三个值：

• contain: 可视窗口完全包含网页内容（左图）
• cover：网页内容完全覆盖可视窗口（右图）
• auto：默认值，跟 contain 表现一致

image.png

注意：网页默认不添加扩展的表现是 viewport-fit=contain，需要适配 iPhoneX 必须设置 viewport-fit=cover，这是适配的关键步骤。

env() 和 constant()

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

• safe-area-inset-left：安全区域距离左边边界距离
• safe-area-inset-right：安全区域距离右边边界距离
• safe-area-inset-top：安全区域距离顶部边界距离
• safe-area-inset-bottom：安全区域距离底部边界距离

1、当 viewport-fit=contain 时 env() 是不起作用的，必须要配合 viewport-fit=cover 使用
2、constant() 在 iOS11.2 之后就不能使用的，但我们还是需要做向后兼容：
padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 /
padding-bottom: env(safe-area-inset-bottom); / 兼容 iOS >= 11.2 */
3、env() 跟 constant() 需要同时存在，而且顺序不能换。

参考： 网页适配 iPhoneX，就是这么简单