前些年的iphone X一出现 手机厂商纷纷取消了实体的物理按键，ios取而代之的是底部的一个大横条 安卓这边基本上也有不少虚拟按键的厂商 就会导致一些比较奇葩的问题出现 比如 这种的情况的发生，或者说刘海屏，挖孔屏 一般来说这种时候，都需要我们前端去进行设备适配。

安全区域 安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）的影响，以及横屏状态下他们的影响。 更详细说明介绍，参考官方文档：Human Interface Guidelines -iphone - X

iOS11 新增特性，苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展，用于设置网页在可视窗口的布局方式，可设置三个值：

iOS11 新增特性，Webkit 的一个 CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量：

一般来说的话，只需要关注 safe-area-inset-bottom以及safe-area-inset-top即可，他俩的值代表的是顶部的刘海以及底部的黑条距离安全区的距离。

后来官方给其加了一段说明： The env() function shipped in iOS 11 with the name constant(). Beginning with Safari Technology Preview 41 and the iOS 11.2 beta, constant() has been removed and replaced with env(). You can use the CSS fallback mechanism to support both versions, if necessary, but should prefer env() going forward. 这就意味着，之前使用的 constant() 在 iOS11.2 之后就不能使用的，但我们还是需要做向后兼容，像这样：

注意：env() 跟 constant() 需要同时存在，而且顺序不能换。

新增 viweport-fit 属性，使得页面内容完全覆盖整个窗口：

这一步根据实际页面场景选择，如果不设置这个值，可能存在小黑条遮挡页面最底部内容的情况。

如果说直接设置bottom = 0； 那么会出现底部固定定位和小黑条重叠的样式就和图示一样。 这种情况的话可以通过增加外部盒子的padding-bottom来解决这个问题

还有一种方法就是通过增加一个空的底部固定定位占位元素，来实现小横条不重叠

类型二：fixed 非完全吸底元素（bottom ≠ 0），比如 “返回顶部”、“侧边广告” 等 像这种只是位置需要对应向上调整，可以仅通过外边距 margin 来处理：