页面适配iPhone X系列

背景

移动端页面开发时，有时会需要按钮悬浮于屏幕底部。对于iPhone x及以后的系列，因为底部小白条的存在，靠近页面底部的交互会与系统原生小白条的交互冲突，所以需要做些兼容性的处理。

先上结论：

html:增加viewport-fit属性，设为cover

<meta name="viewport" content="width=device-width, viewport-fit=cover">

css:

/* 悬浮于屏幕底部的样式 */
.fixed-bottom {
  bottom: constant(safe-area-inset-bottom,0px)!important; /* 适配ios < 11.1 */
  bottom: env(safe-area-inset-bottom,0px)!important; /* 视频ios >= 11.1 */
}
/* 隔离区覆以白条，减少突兀 */
.fixed-bottom::after {
  content: '';
  position: fixed;
  bottom: 0;
  left: 0;
  height: constant(safe-area-inset-bottom,0px)!important;
  height: env(safe-area-inset-bottom,0px)!important;
  background: #fff;
  width: 100%;
}

解析

ios11以后，苹果公司为了 适配iphoneX，对viewport meta标签做了一个扩展，即viewport-fit，用于设置网页在可视窗口的布局方式，有如下三个值：

• contain: 可视窗口完全包含网页内容（左图）

• cover：网页内容完全覆盖可视窗口（右图）

• auto：默认值，跟 contain 表现一致
  
  而env()是css函数中的环境变量，constant()是其在iOS11.0上的命名。iOS11 新增特性，Webkit 的一个 CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量：

• safe-area-inset-left：安全区域距离左边边界距离

• safe-area-inset-right：安全区域距离右边边界距离

• safe-area-inset-top：安全区域距离顶部边界距离

• safe-area-inset-bottom：安全区域距离底部边界距离

拓展

1. env函数第二个参数是可选的，如果环境变量不可用，该参数可让您设置备用值，如env(safe-area-inset-bottom, 0px)
2. 例子中只列举了悬浮贴底情况的适配，实际业务中可能还有留间隙的场景，可以用css的calc函数，将env()当做一个单位为px的值来使用，如

/* 其他属性*/
calc(env(safe-area-inset-bottom) + 60px);
/* 其他属性*/

3. 还有一种情况，如教育类、视讯类产品的页面适配：网页横屏时，页面左右侧的安全距离可能不为0（如iPhone X的刘海等），此时需要用到safe-area-inset-left、safe-area-inset-right，可以给页面设置padding，以保证内容的完整显示
4. 小程序环境中不用、也无法设置viewport，可以直接使用env(…)