2***@qq.com
2***@qq.com
  • 发布:2020-11-12 11:22
  • 更新:2020-11-12 15:50
  • 阅读:637

沉浸式状态栏高度 与 非沉浸式状态栏高度不一致

分类:HTML5+

图一就是非沉浸式的状态栏高度,刚刚好碰到屏幕下巴

图二是开启了沉浸式的,红色部分是自己的创建的div。其高度有问题,多了2px。
测试设备为红米 note 7 Pro 安卓版本10
在苹果的6s Plus中也是这个情况,ios系统是12,不算落后了

找了很多原因,就是没找到是为什么,当然这里是根据 userAgent 的。但其实用 plus.navigator.getStatusbarHeight() 也是一样的。

不过在另外一台红米的手机上(这台还版本还更低)。不会出现这个情况

2020-11-12 11:22 负责人:无 分享
已邀请:
2***@qq.com

2***@qq.com (作者)

问题解决了,原因是因为我为了本地开发环境好做测试。把这个设置成固定值了
< meta name="viewport" content="width=360px,user-scalable=no,viewport-fit=cover" />
上面改成下面这个就行了
< meta name='viewport' content='maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width,initial-scale=1.0,viewport-fit=cover'/>

对了,分享一下这个 viewport-fit=cover
ios中需要(ios12 苹果6s P),不然无法实现状态栏的沉浸式

该问题目前已经被锁定, 无法添加新回复