移动端H5适配iphoneX底部栏,css快速解决方案

技术分享 · Fecmall · 于 3年前 发布 · 2039 次阅读

1、meta标签放入viewport-fit=cover ps:它是干嘛的自行度娘

<meta name="viewport" content="width=device-width...... viewport-fit=cover">

2、css设置

@supports (bottom: env(safe-area-inset-bottom)){
    body,
    .footer(底部栏){
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

不要忘记将底部栏放上footer这个class类名! 搞定!

作者:easonR

链接:https://www.jianshu.com/p/d9ca9f85d06e

来源:简书

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

共收到 0 条回复
没有找到数据。
添加回复 (需要登录)
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册
Your Site Analytics