H5如何获取移动端安全区域高度

越来越多移动设备出现齐刘海、底部安全区域等设计。

设计H5页面时不得不专门为这类设备做兼容。

本文讲讲如何通过CSS实现兼容安全区域的高度兼容。

借助CSS的env实现：

获取顶部安全区域高度：env(safe-area-inset-top)

获取底部安全区域高度：env(safe-area-inset-bottom)

当然，并不是所有的浏览器都支持这两个参数。

因此我们需要进行兼容设置

.footer {
    padding-bottom: 7px;
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .footer {
        padding-bottom: calc(env(safe-area-inset-bottom) + 7px);
    }
}

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

• 上一篇：没有了
• 下一篇： React 中的打印和导出功能