h5怎么适配安卓刘海屏

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

阅读 2.6k
评论 2019-05-30 提问
    2 个回答
    gaoryrt
    • 2.7k

    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: calc(constant(safe-area-inset-top) + 20px); // 标准
        top: calc(env(safe-area-inset-top) + 20px); // 兼容 ios11
        top: 20px // 兼容非刘海屏
    }

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

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

    评论 赞赏 2019-05-30