关于webview顶部灰条的解决

新版本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;"

<html style="height: 100vh;">

由于问题产生的原因不同，如果以上无法解决你的问题请在下方留言

请叫我九爷

横版下还是出现顶部还是出现顶部灰条的解决

2023-09-01 14:30

s***@163.com

回复 s***@163.com ：

viewport-fit=cover

2020-07-29 13:39

回复 MrHu ：

优秀，我也是加了之后就可以了

3***@qq.com

添加了这个，状态栏无灰色了。但是webview的底部多了一个白块

2019-11-27 01:12

上香

2019-08-23 17:44

yesterdream

contentAdjust 属性配置的页面了好像没效果，沉浸模式下头部导航栏还是会显示一个灰条。怎么解决呢?@DCloud_IOS_XTY

2019-04-29 00:06

MrHu

我在<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />中加入viewport-fit=cover就解决了，

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover" />

2019-03-22 17:57

波克比

nice

2019-01-09 15:28

zk998

必须把安全区设置为none，tab页选项才能完整显示。暂时先这样凑合吧。

"safearea" : {
"bottom" : {
// 底部安全区域配置
"offset" : "none"
}
},

2019-01-08 23:37

webview形式的tab也还是无法正常显示，能有个靠谱点的解决方案吗？

2019-01-08 23:33

关于webview顶部灰条的解决

11 个评论

目录

公告

相关问题