iPhone X 配备一个覆盖整个手机的全面屏，顶部的“刘海”为相机和其他组件留出了空间。然而结果就是会出现一些尴尬的情景：网站被限制在一个“安全区域”，在两侧边缘会出现白条儿。移除这个白条儿也不难，给 body 设置一个 background-color 就可以搞定。或者，可以添加 viewport-fit=cover meta 标签，将整个网站扩展到整个屏幕。
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">`
为了处理这些需求，iOS 11 的 Safari 引入了一些 constant 来处理 viewport-fit=cover 属性。
safe-area-inset-top
safe-area-inset-right
safe-area-inset-left
safe-area-inset-bottom
这些值可以应用到 margin、padding 上，也可以应用到绝对定位的 top 或 left 上。
在网页的 container 上添加如下代码：
padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);
iOS 11 和早期版本的差异性在于 webview 内容遵循安全区域。也就是说，如果你在顶部设置一个 top 为 0 的 fixed 定位的 header，实际位置会出现屏幕顶部以下 20px 处，和状态栏底部是对齐的。当向下滚动的时候，会向上移动到状态栏的后面；当向上滚动时，会再次滑到状态栏的下方（网页内容会在那条尴尬的 20px 的缝隙中显示）
