当苹果宣布发布他们的旗舰手机-- iPhone X 的时候，他们允诺将为未来移动设备设定新的标准。我们决定需要了解一些内容。
“屏幕再也不必是方形的”
除了无边框设计，就是我们熟悉的“齐刘海”，官方叫：Sensor Housing。它迅速成为一个热门话题，提出了一种全新的设计挑战：屏幕再也不必是方形的。虽然这对原生应用是一个更大的考验，但web开发也需要一些考虑。不管它是吓到你或者激发了你， sensor housing 都已存在。现在是为你的客户提供一种非常整洁体验的绝佳机会，即使他们可能不会期待。
起初我以为会需要做好多工作，很像当我第一次学习 CSS media queries 时--但一旦你学过一些新 CSS 属性后，就会变得简单。事实上，适配 Sensor Housing 很简单，接下来我将教你。
有Mac电脑，可以下载一个模拟器，如果你有真机就更好了！
问题：
当 iPhone X 被旋转为横向时，设备左右可得到的内容区域是不一样的，这是因为需要取决于设备的绝对方位和 sensor housing 的位置，你站点内容竖直方向的安全区域在15px 或 45px。我们的数据显示有 5%-10%的 iPhone X 用户使用横屏，或许是因为屏幕大，或许是因为关于 sensor housing 高涨的讨论导致想看看会出现什么情况，但我很高兴他们能看到一个适应良好的网站。
iOS 的解决方案是两边留白以确保内容都可见。这是一个足够好的解决方案，但幸运的是苹果给了一些额外的特性以此来帮助网站充分利用无边框的优势。
两个要素：
有2个基础的要素来调节 iPhone X 的 sensor housing:
1. 一个新的 viewport meta content 值
2. 四个新的 padding 属性值
Viewport meta 内容：
在 <head> 中找到 viewport ，然后在 content 最后加上：viewport-fit=cover.
代码语言：javascript复制<meta name="viewport" content="width=device-width,minimum-scale=1.0,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover"
这就是告诉 Safari 丢弃左右留白允许站点内容展示到边框。这时一些内容就会被遮挡在 sensor housing 凹槽下面。我们必须设置一些智能的 padding 值，以使内容可见。
CSS:
我们希望为被 sensor housing 遮挡的元素设置 padding 值。足够友好的是，苹果已经提供了一个CSS 方法和一些预定义的CSS 变量，来应对这重担： env() 和 safe-area-inset-*。
因为 env() 仅在 iOS 11.2 设备上可用，所以目前你依旧需要引入 constant() 作为回退方案。iOS 11.2 好像一直也会支持 constant()，但依旧建议都引入。
代码如下：
代码语言：javascript复制.container {
/* Fallback */
padding:0 10px;
/* iOS 11 */
padding-left: constant(safe-area-inset-left);
padding-right: constant(safe-area-inset-right);
/* iOS 11.2 */
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}你需要实验以此来发现最适合设置这些样式的地方，多数要依赖你的设计来决定。在我们的例子中，我们使背景填充整个屏幕但使内容约束到安全区域，所以我们在内部元素的 containers 上应用了 padding。
提示：
使用Safari的开发者工具，检测这个元素：
代码语言：javascript复制.container {
/* env() for iOS 11.2 , otherwise constant() */
padding-top: env(safe-area-inset-top);
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
}
结果：
在合适的地方设置你的padding之后，你已为你的用户转变了体验：从“压扁适应”到“量身定制”！看着是不是很漂亮？
webkit.org 官网提供了一些 min() 和 max() 配合 env() 以此来适应更复杂的布局。
