h5怎么适配安卓刘海屏

Question

iOS刘海屏官网有给出适配方案，但是安卓刘海屏官网并没有给出h5的适配方案，请问下各位大佬安卓刘海屏h5要怎么适配呢？

Answer 1

meta 标签里添加 viewport-fit=cover

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">

然后 css 里写作 constant(safe-area-inset-top)

div {
    top: 20px // 兼容非刘海屏
    top: calc(constant(safe-area-inset-top) + 20px); // 标准
    top: calc(env(safe-area-inset-top) + 20px); // 兼容 ios11
   
}

注意：一定是 constant - env - 原生 这个顺序才能做到优雅降级
注意：除了 safe-area-inset-top 还有 safe-area-inset-left -right -bottom 可以用

如果有帮到你请 upvote 或采纳～

Answer 2

ios可以使用官方的文档，安卓目前的做法是跟原生协作，调取原生协议。但是这种做法只在app里面可以。在纯h5里面就不行了。