正文
由于取消了实体 Home 键，iPhone X 的基础操作也相应做了些改变，比如：
-
返回桌面：从底部向上轻扫一下，即可返回桌面。
-
多任务处理：从底部向上轻扫，滑至中部停顿一下，可显示所有打开的 app。
-
显示控制中心：从屏幕顶部右侧向下轻扫，可打开控制中心 siri：按住侧边按钮，就能向 Siri 提问。
-
Apple Pay：连按两下侧边按钮，即可使用 Apple Pay 安全地支付。
值得一提的是，虚拟指示条及其手势的介入，需要我们在设计阶段涉及到屏幕底部上下滑动的交互要更谨慎的思考测试，避免误操作。
5. 安全区域
安全区域，一个熟悉又陌生的词语。
熟悉是因为在平面设计中，由于印刷裁切过程中的误差，设计师需要给设计稿预留出「出血」 位置，确保设计内容在安全区域中；陌生又是因为在互联网设计中已极少被提及。
这次，由于 iPhone X 的设计理念与工艺问题，Apple 也引入了「安全区域」 这个概念。
根据上述顶部传感器、虚拟 home 键的不同要求，Apple 提供了横、竖屏状态下的安全区域视觉规范。
竖屏：竖屏时候，除去屏幕最顶部往下 44pt，底部往上 34pt 后，中间部分视为安全区域。
横屏：而横屏时候则相对复杂一些，因为虚拟指示条通常情况下都是出现在屏幕底部，所以不仅屏幕左右会留出 44pt 的空白位置，屏幕底部也会留出 21pt 的位置。
至于为什么没有 “刘海儿” 一侧也会留出空白位置，则是 Apple 认为，“刘海儿”出现于左侧或右侧并不确定，让安全区域中的内容居中显示，可以避免屏幕旋转所造成的 UI 元素位置变化。
适配方案的预研、对比、选择
在了解 iPhone X 的基本情况后，我们可以大致掌握它所需要适配的点，在于安全区域布局、全屏图缩放裁切以及边界交互手势，那又将有哪些方案可以做好这些适配呢？
1. 安全区域布局
方案一：
针对 iPhone X 新的安全区域，特别像具备通顶效果的页面可能面临到的内容被遮挡，我们可能会首先就想到一个解决方案——通过添加一个适配条，把页面内容挪一个位置，甚至我们可以把适配条定义为我们的产品品牌色，这样似乎也会满足用户的心理诉求。
但如果仔细一想，这种简单粗暴的方法并不符合 Apple 想要传达的全面屏设计理念，官方也提出了不推荐了以这样的方式来实现适配。不然，真添加了黑色一个适配条，谁能发现你用的是 iPhone X 呢？
方案二：
因为 iPhone X 的安全区域，页面内容会被限制在安全区域内，横屏情况下更为明显，在安全区域外都是白色。
Apple 也意识到了这种尴尬的显示方式，所以引入了一个 meta 标签的 viewpoint 扩展属性——viewpoint-fit，在 iOS 11 中 viewpoint-fit 也官方添加到 CSS Round Display 规范中了。
通过 viewport-fit 可以设置可视视窗的大小，它有三个属性值：
-
Auto：默认值。这个值不影响初始布局视窗，整个 Web 页面是可视的。
-
Contain：最初的布局视窗和视觉布局视窗被设置为最大的矩形。
-
Cover：初始布局视窗和视觉布局视窗被设置为设备物理屏幕的限定矩形。
所以我们可以通过 viewpoint-fit=cover 来解决问题，使页面内容跳出安全区域的框框。
跳出了安全区域的框框之后，第二步当然需要设置动态的边距来避开屏幕圆角、顶部传感器以及虚拟指示条，IOS11 提供了一个新的 css 变量——constant(safe-area-inset-※)。
constant(safe-area-inset-*) 提供了四个方向的值：
-
constant(safe-area-inset-top)：在 Viewport 顶部的安全区域内设置量。
-
constant(safe-area-inset-bottom)：在 Viewport 底部的安全区域内设置量。
-
constant(safe-area-inset-left)：在 Viewport 左边的安全区域内设置量。
