网页安全区适配问题早上刚上班就被老板甩了截图，原因是老板新买的iphone12页面底部安全区竟然没有适配。看看自己手里

早上刚上班就被老板甩了截图，原因是老板新买的iphone12页面底部安全区竟然没有适配。

看看自己手里的iphoneX没问题，刚想反驳，理智阻止了我。难道因为没钱买12，连代码都写不好啦。

果断升级iOS 14，发现曾经完美适配iphoneX+的安全区,又出问题了...

刚想甩锅ios系统升级，理智又阻止了我。

因为发现不能完全甩锅ios系统升级，而是另有玄机。但bug ，不就是就是这么充满偶然性吗？

那索性将安全区适配的内容做一次整理，也顺便记录一下这个bug（见：第3条）

1、告诉浏览器使用屏幕上的整个可用空间，并因此使我们能够使用 env() 函数

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

viewport-fit 视口的适配模式，我们要使用 cover。关于 viewport-fit 有任何疑问可以移步：developer.mozilla.org/zh-CN/docs/…

2、页面的需要撑满整个页面的元素添加：

 padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
 padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */

简单介绍下 env() 函数：在iOS11.2+ 新增，用来将代理商定义的变量的值插入在我们的css代码中。

语法如下：

env(safe-area-inset-top, 20px);
env(safe-area-inset-right, 1em);
env(safe-area-inset-bottom, 0.5vh);
env(safe-area-inset-left, 1.4rem);

3、其他可能引起安全区覆盖不上底部漏白的情况： iOS14 + 如果一开始进入页面就有阻止页面滚动的动作（比如，一进入页面有弹窗并且用overflow：hidden；阻止了页面 body 或者 html 的滚动），会引起 ios 不能撑满安全区域，产生页面底部的漏白。