还有一种方案就是，可以通过新增一个新的元素（空的颜色块，主要用于小黑条高度的占位），然后吸底元素可以不改变高度只需要调整位置，像这样：
{ margin-bottom: constant(safe-area-inset-bottom); margin-bottom: env(safe-area-inset-bottom); }
空的颜色块：
{ position: fixed; bottom: 0; width: 100%; height: constant(safe-area-inset-bottom); height: env(safe-area-inset-bottom); background-color: #fff; }
类型二：fixed 非完全吸底元素（bottom ≠ 0），比如 “返回顶部”、“侧边广告” 等
像这种只是位置需要对应向上调整，可以仅通过外边距 margin 来处理：
{ margin-bottom: constant(safe-area-inset-bottom); margin-bottom: env(safe-area-inset-bottom); }
或者，你也可以通过计算函数 calc 覆盖原来 bottom 值：
{ bottom: calc(50px(假设值) + constant(safe-area-inset-bottom)); bottom: calc(50px(假设值) + env(safe-area-inset-bottom)); }
你也可以使用 @supports 隔离兼容样式
写到这里，我们常见的两种类型的 fixed 元素适配方案已经了解了吧。如果我们只希望 iPhoneX 才需要新增适配样式，我们可以配合 @supports 来隔离兼容样式，当然这个处理对页面展示实际不会有任何影响：
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) { div { margin-bottom: constant(safe-area-inset-bottom); margin-bottom: env(safe-area-inset-bottom); } }
到此这篇关于微信小程序吸底区域适配iPhoneX的实现的文章就介绍到这了,更多相关小程序吸底区域适配iPhoneX内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章: