2. 全屏图适配
对于全屏图，我们会有很多场景会用到，比如闪屏、整屏轮播 H5 等。而在不同尺寸比例的手机屏幕上显示，全屏图被裁切是不可避免，对它的适配，我们的目标是保证图片主体内容的完整显示、图片信息的有效传达。
所以，也有了两种适配方式：基于宽度适配，或基于高度适配。
3. 边界手势操作
正如上述提及的屏幕圆角、顶部传感器以及虚拟指示条影响，Apple 建议避免将交互元素放在屏幕底部或者角落。因为 iPhone X 自身固有的手势会让系统自动屏蔽你在这个区域设置的手势，同时屏幕角落区域很难触控。
如安全区中所讲的一样，为了更好地进行适配和良好的布局，官方推荐所有核心内容和操作需要内嵌在安全区内，从而避免与状态栏、导航栏、工具栏及标签栏重合。
QQ 音乐经典场景的如何适配
而 QQ 音乐移动终端内的适配主要分为了不通顶 。 有 playbar、不通顶 · 无 playbar、通顶 · 有 playbar、通顶 · 无 playbar 四种场景。
以下是 QQ 音乐移动终端中一些经典场景对于此次 iPhone X 的适配历程，整个适配解决方案都是基于上述所提到的方案二——viewport-fit=cover 与 constant()。
1. 顶部通栏
为了给用户有更好的沉浸式体验，QQ 音乐移动终端内有不少页面具有通顶效果。
可以看到普通 iPhone 有 128px 的工具栏区域，而 iPhone X 有 176px 的工具栏区域，以及 Android 有 136px 的工具栏区域。 我们会建议设计师在设计通顶效果页面时，顶部最少预留 136px 的纯色或者无主要内容区域。
根据应用场景的不同，QQ 音乐移动终端的 web 通顶效果也分为了两种：
第一种：顶部有通栏图片或者深色背景，页面下拉后标题栏区域显示黑色遮罩，标题拦标题动画效果可自定义。
第二种：有整页的图片背景或者是深颜色背景，标题以下区域内容做局部滚动，标题拦标题动画效果可自定义。
除了在 meta 标签加上 viewport-fit=cover 之外，通过在 body 这个 dom 上加上样式名 page_downright，利用命名空间表明这是一个通顶效果页面，然后利用 constant(safe-area-inset-※) 来设置安全区域的距离。因为在 iOS 11 都能支持这个变量，目前在非 iPhone X 的其他 iOS 11 机型上取到的值为 0，为了解决这个问题，用到了 css 原有的计算函数 calc()。
2. 底部虚拟指示条
长页面底部
Apple 的设计规范中提到，如果页面为一个长内容可滚动的页面，那么我们可以放心地把页面内容铺开整个屏幕。会发现页面内容可能会跟虚拟指示条重叠在一起，但没关系，Apple 自身的页面也是如此，只需在页面就底部留好安全的空白设置就可以了。
吸底 bar
有吸底 bar 的页面，如底部的下载导流 bar、个人资产展示 bar，可以参考 iPhone X 自身的带有底部导航栏的 App 效果，发现吸底 bar 实际一样是始终悬浮固定在屏幕底部，同时为虚拟指示条按设计规范留足了空间。
3. 音乐杂志
音乐杂志是近期 QQ 音乐移动终端新推出的主推音乐资讯内容的板块，由 cp 设计提供 ui 元素来层叠组合成音乐杂志封面。
免责声明：科技狗对文中陈述、观点判断保持中立，不对所包含内容的准确性、可靠性或完整性提供任何明示或暗示的保证。请读者仅作参考，并请自行承担全部责任。 本网站转载图片、文字之类版权申明，本网站无法鉴别所上传图片或文字的知识版权，如果侵犯，请及时通知我们，本网站将在第一时间及时删除：yzl_300@126.com
