h5怎么适配安卓刘海屏

发帖要保护隐私hl
  • 349

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

评论
阅读 4.8k
2 个回答
✓ 已被采纳

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 或采纳~

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

宣传栏