美文网首页
IOS h5填充到安全区域

IOS h5填充到安全区域

作者: 御坂七十一号 | 来源:发表于2021-06-29 15:07 被阅读0次

    需求:h5页面顶部图片要沉浸到状态栏。
    1.html中设置 meta viewport-fit=cover"

    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui,viewport-fit=cover">
    
    1. 调整页面距离屏幕上下的距离env()这些可以作为padding、margin、top等。
    body{
      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);
    }
    

    3.问题:当设置meta viewport-fit=cover" 时,高度100%,会导致页面实际高度只有苹果安全区域(就是不设置meta viewport-fit=cover"时可以操作的部分)的高度。百度的解决方法是用媒体查询修改body\html的高度,然而并不行。
    解决:需要让原生的webView设置,然后h5按照第二步的修改样式。

    if #available(iOS11.0, *) {
        self.webview.scrollView.contentInsetAdjustmentBehavior= .never;
    }
    

    相关文章

      网友评论

          本文标题:IOS h5填充到安全区域

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