本文介绍了如何解决iPhone X及后续型号设备底部小黑条导致的屏幕适配问题，特别是在H5和小程序中。推荐使用CSS适配方案，包括设置`viewport-fit=cover`，使用`constant()`和`env()`处理安全区域，并针对目标固定元素调整布局。同时提到了JS适配方案作为补充。
场景
由于iPhoneX去掉了物理按键，改为了底部小黑条，这就会导致屏幕适配问题，最常见的场景就是底部fixed的元素被阻挡的情况。对于这种问题，我们一般采取css或js的处理方式(适用于h5，小程序)。
css适配方案(推荐)
第一步：设置网页的头部标签
viewport-fit：IOS11新增的特性，是为了iPhoneX而对meta标签做出的一个拓展属性。目前有三个值：
contain 可视窗口完全包含网页内容
cover：网页内容完全覆盖可视窗口
auto：默认值，跟 contain 表现一致
注意：适配的关键在于必须设置viewport-fit=cover
第二步：将页面主体设置在安全区域内
这一步视实际场景而定，可以不设置，带来的影响就是会出现底部区域的内容会被挡住；
body {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
env() 和 constant()是IOS11新增的css函数，有四个预定义的变量safe-area-inset-bottom、safe-area-inset-top、safe-area-inset-left、safe-area-inset-right，分别是安全区域到各边界的距离，此时我们只需要关心afe-area-inset-bottom(横竖屏的情况下是不一样的)。对于不支持这两个属性的情况，浏览器会忽略。
注意&#
最低0.47元/天 解锁文章
750
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
