css适配iPhoneX屏幕安全区

时间 2019-11-08

原文原文链接

场景

iPhoneX对比起之前其余的手机，屏幕顶部变成了留海屏，底部取消了物理按键改为了小黑条，这种改动致使了web开发中页面上新的适配问题。css

好比一些须要贴在底部的按钮，和呼起的tabBar和底部弹出框，在iphoneX上就会出现被小黑条遮挡内容，或者页面上出现白色空隙的问题。html

先上解决代码

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

body {height: 100vh;}
/* 你的贴底元素↓ */
.container {
  position: aboslute;
  bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
  padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
  ...
}

几个新知识

安全区域

安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响，以下图蓝色区域：ios

Apple的官方文档：adaptivity-and-layoutweb

viewport-fit

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

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

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

参考文档：viewport-fit-descriptorapp

env

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

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

env()必须配合 viewport-fit=cover 使用!

咱们最经常使用的就是 safe-area-inset-bottom, 这个表明着不被小黑条遮挡的安全距离。ide

padding-bottom: env(safe-area-inset-bottom);

参考文档：designing-websites-for-iphone-x，MDN/env()svg

reference

https://aotu.io/notes/2017/11...函数