webview中viewport初始化不生效

提醒:本文最后更新于 2329 天前,文中所描述的信息可能已发生改变,请谨慎使用。

最近做的项目有用户反馈问题,在 WebView 中页面的宽度不对了,显示了 PC 站的大小。我使用 chrome://inspect 调试了一下,发现 WebView 中任何一个自适应网站都有问题了,并且将页面 DOM 删除到最少也还是有问题,确认是客户端 WebView 的问题。

查了下资料后,最开始怀疑是不是客户端没有加上 setUseWideViewPort(true) 让 WebView 支持 viewport 属性。客户端查了下代码告知是有的,只能想想是否是其它问题了。

后来想了一下出问题的页面都比较特别,是需要经过一个中间页的跳转的。而这个中间页是没有设置 viewport 属性的。根据规范,如果在设置了 setUseWideViewPort(true) 的 WebView 中不写 viewport 的话默认是使用屏幕宽度来进行初始化,这里的屏幕宽度是真实的屏幕宽度,所以就看起来不正常了。

由于之前已经了解过 Webview 会有一些初始化的行为,这些行为是在这个 Webview 初始化之后无法改变的,只要这个 WebView 还没有被销毁,不管你切换什么页面都是无法修改的。所以我就在怀疑是不是 Webview 最开始使用了跳转页来初始化 WebView,然后跳转页上没有设置 viewport 属性初始化行为就不正常了。后来跳转后的页面虽然有设置 viewport,但是初始化已经完成所以已经不生效了。

解决的办法也非常简单,直接在跳转页上增加 viewport 设置即可。添加之后测试了下问题真的解决了。

Avatar
怡红公子 擅长前端和 Node.js 服务端方向。热爱开源时常在 Github 上活跃,也是博客爱好者,喜欢将所学内容总结成文章分享给他人。

0 评论