关于webview顶部灰条的解决

分类：HTML5+

HTML5+

新版本webview调整了适配沉浸式的规则，开发者可以更灵活的根据自己的需要进行沉浸式模式的适配，
这种情况下webview会自动调整内容区域避免和安全区域重合，一些老项目升级后如不做处理在沉浸式模式下顶部会显示灰条或者其他显示异常，该问题可以通过以下方式解决：
注意：webview style 中位置区域的计算是包含安全区域的
在meta节点中添加viewport-fit，关于viewport-fit 的详细说明可以自己百度下

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

如果想和老版本保持一致可以设置webview style 的contentAdjust属性(该属性不支持动态修改)
false 表示不调整如下:

// 5+App  
 var wb = new plus.webview.create("url","id", {contentAdjust:false});  
//uniapp  
    "pages": [  
        {  
            "path": "....",  
            "style": {  
                "app-plus": {  
                      "contentAdjust":false

如果是通过 web-view 组件加载 html 组件页面上面或下面有留白除了需要添加 viewport-fit=cover ，还要给 html 添加 style="height: 100vh;"