# 适配iPhoneX `iPhoneX`的出现将手机的颜值带上了一个新的高度，它取消了物理按键，改成了底部的小黑条，但是这样的改动给开发者适配移动端又增加了难度。 <br> <br> # 安全区域 在`iPhoneX`发布后，许多厂商相继推出了具有边缘屏幕的手机。  <br> 这些手机和普通手机在外观上无外乎做了三个改动：圆角（`corners`）、刘海（`sensor housing`）和小黑条（`Home Indicator`）。为了适配这些手机，安全区域这个概念变诞生了：安全区域就是一个不受上面三个效果的可视窗口范围。 <br> 为了保证页面的显示效果，我们必须把页面限制在安全范围内，但是不影响整体效果。 <br> <br> # viewport-fit `viewport-fit`是专门为了适配`iPhoneX`而诞生的一个属性，它用于限制网页如何在安全区域内进行展示。 <br>  <br> * `contain`: 可视窗口完全包含网页内容 * `cover`：网页内容完全覆盖可视窗口 <br> 默认情况下或者设置为`auto`和`contain`效果相同。 <br> <br> # env、constant  <br> 我们需要将顶部和底部合理的摆放在安全区域内，`iOS11`新增了两个`CSS`函数`env、constant`，用于设定安全区域与边界的距离。 <br> 函数内部可以是四个常量： * `safe-area-inset-left`：安全区域距离左边边界距离 * `safe-area-inset-right`：安全区域距离右边边界距离 * `safe-area-inset-top`：安全区域距离顶部边界距离 * `safe-area-inset-bottom`：安全区域距离底部边界距离 <br> 注意：我们必须指定`viweport-fit`后才能使用这两个函数： ~~~ <meta name="viewport" content="viewport-fit=cover"> ~~~ <br> `constant`在`iOS < 11.2`的版本中生效，`env`在`iOS >= 11.2`的版本中生效，这意味着我们往往要同时设置他们，将页面限制在安全区域内： ~~~ body { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); } ~~~ <br> 当使用底部固定导航栏时，我们要为他们设置`padding`值： ~~~ { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); } ~~~ <br> <br> # 参考资料 [关于移动端适配，你必须要知道的](https://juejin.im/post/5cddf289f265da038f77696c)