美文网首页
css 兼容苹果x更高机型触控条(安全区域)

css 兼容苹果x更高机型触控条(安全区域)

作者: 忧郁的胡渣 | 来源:发表于2020-05-07 16:51 被阅读0次

    1.  head标签的meta添加 viewport-fit=cover 详情如下;

        <meta content="viewport-fit=cover" >

    2.给最外部标签添加以下css样式:

    body,html{

        padding-top: constant(safe-area-inset-top);

        padding-left: constant(safe-area-inset-left);

        padding-right: constant(safe-area-inset-right);

        padding-bottom: constant(safe-area-inset-bottom);

        padding-top: env(safe-area-inset-top);

        padding-left: env(safe-area-inset-left);

        padding-right: env(safe-area-inset-right);

        padding-bottom: env(safe-area-inset-bottom);

    }

    相关文章

      网友评论

          本文标题:css 兼容苹果x更高机型触控条(安全区域)

          本文链接:https://www.haomeiwen.com/subject/bniaghtx.html