前言：

最近在做h5的项目，测试的时候发现iPhoneX底部的小黑条挡住了底部tab切换和吸底的按钮。经过调研，总结了一套比较简单的适配方案。

几个名词：

安全区域：

安全区域是指一个可视窗口，处于安全区域的内容不受圆角(corner)，齐刘海(sensor housing)，小黑条(home indicator)影响。如图所示：

也就是说，要做好适配，必须保证页面可视、可操作性区域是在安全区域内。

viewport-fit

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

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

env() & constant()

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

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

我们的项目只需要关注 safe-area-inset-bottom 这个变量，因为它对应的就是小黑条的高度（横竖屏时值不一样）。

根据官方文档：

The env() function shipped in iOS 11 with the name constant(). Beginning with Safari Technology Preview 41 and the iOS 11.2 beta, constant() has been removed and replaced with env(). You can use the CSS fallback mechanism to support both versions, if necessary, but should prefer env() going forward.

constant() 用于兼容ios11.2以下版本，env()用于iOS11.2以上版本。

适配步骤：

1. meta中增加viewport-fit属性，使页面内容覆盖整个窗口

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

2. 将body限制在安全区域内

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

3. 将fixed元素限制在安全区域内

bottom: calc(15px + constant(safe-area-inset-bottom));
bottom: calc(15px + env(safe-area-inset-bottom));

4. Done

参考文章：

developer.mozilla.org/en-US/docs/… www.w3.org/TR/css-roun… developer.apple.com/design/huma… jelly.jd.com/article/600…

网页适配iPhoneX - 301

前言：