美文网首页
iphoneX移动端适配刘海屏的处理

iphoneX移动端适配刘海屏的处理

作者: nora_wang | 来源:发表于2019-07-05 09:44 被阅读0次

    1.设置全屏的方式 viewport-fit=cover 默认值为:auto/contain,全屏值为:cover

    <meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover">
    

    2.css中设置的constant()专门处理刘海屏问题
    constant() 以及 safe-area-inset-top safe-area-inset-right safe-area-inset-bottom safe-area-inset-left 是 iOS 11 webview 新增加的特性,专门用于应对刘海。

    body {
          padding: constant(safe-area-inset-top) constant( safe-area-inset-right ) constant( safe-area-inset-bottom) constant( safe-area-inset-left);
    }
    

    (此处的上右下左四个值为横屏时的方位)
    //默认值
    safe-area-inset-top=0, safe-area-inset-right=44px , safe-area-inset-bottom=21px, safe-area-inset-left=44px

    相关文章

      网友评论

          本文标题:iphoneX移动端适配刘海屏的处理

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