更新 2017.11.08

Webkit在iOS11中新增CSS Functions:env()替代constant()，文档中推荐使用env()，而constant()从Safari Techology Preview 41 和iOS11.2 Beta开始会被弃用。env()用法如同var()，在不支持env()的浏览器中，会自动忽略这一样式规则，不影响网页正常的渲染:

.post {
    padding: 12px;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

苹果公司（Apple）的发布会也开完了，新产品也将登陆了。估计很多开发人员看到iPhone X的设备是要崩溃了，特别对于前端开发人员更是如此。

iPhone X的屏幕覆盖了整个手机的屏幕，为相机和其他各部件留出了一个空间。结果是屏幕设计出现了一些尴尬的情况。比如将网站限制在一个“安全区域”。而在屏幕上的安全区域中，造成网站左边或右边有空白区域。

很多像我这样的前端开始在考虑，这个蛋疼的东西怎么处理。而且项目中肯定要考虑这个设备的处理方式。值得庆幸的是，有两个小技巧或许可以帮助我们。

background-color

正如上图所示，左右（或顶、底部）留有空白的安全区域。这个时候，如果你的网站是单一的纯色做为背景，那么最好最简单的解决方案就是在你的body设置一个background-color。为了安全起见，建议同时在html和body都设置background-color。这个时候，上面的网站看到的效果是这样的：

虽然没有白条，但空出了不少的区域。众所周知，在移动动终端，每一点空间都是非常值钱的，不容我们这样浪费。就算是你的Boss允许你这么做，那也有问题存在。如果你的网站或应用背景不是纯色，是一个渐变，或者是一个图像。此时又进入了蛋疼的阶段。或许你会说，蛋蛋揉揉就不疼了。

viewport-fit

iOS11与早期的版本有个不同的地方，Webview内容将会尊重所谓的安全区域。这意味着，如果你有一个标题栏固定在顶部（position:fixed;top:0）。它将会在屏幕顶部下面的20px开始渲染。当你向下滚动时，它会移动到状态栏的后面。当你向上滚动时，它会再次下降到状态栏下面（在20px的间隙中，内容会透出，这是一个很尴尬的间隙。无法让人接受）。