iPhoneX安全区域与H5引发的问题(Safe Area)

最近正在开发小程序相关的需求时，遇到了一个问题——ios高版本的安全区域，即iPhoneX及以上拥有的“刘海儿”等可滑动区域会与你开发的内容重合。

幸运的是，在小程序上我们只需要考虑底部的底部Home Indicator上滑指示条。

注意，官方不推荐我们粗暴的将这段区域永久的覆盖，例如压黑边隐藏设备的圆角、刘海、指示条。

同样官方推荐避免将交互元素放在屏幕底部或者角落。 因为从屏幕底部上划被用户激活Home指示条并回到主屏或进入多任务切换，且系统会取消你在这个区域布局的手势。而屏幕角落区域很难触控。

小程序文档上，会提供我们获取系统信息的API，之后我们要做的是：

和我遇到一样问题的同事告诉了我这一特性：

为了应对刘海屏幕，苹果也给出了响应的策略，如下：

具体数值：

css 函数 env() 和 constant()

这两个函数都是 webkit 中 css 函数，可以直接使用变量函数，只有在 webkit 内核下才支持

例如：

最后：
env 和 constant 只有在 viewport-fit=cover 时候才能生效。

可以使用 @supports 来隔离兼容样式，当浏览器支持

bottom-button类就会新增margin-bottom的样式

在H5中，安全区域只是其中一个问题，只要知道它的特性，它存在的意义，就可以“对症下药”。

苹果对状态栏做了很好的优化，再也不用担心各种状态导致的高度变化给UI设计带来的影响*

参考链接

如何评价新版 iPhone X 的设计规范？
Apple Developer

area iphonex