webview设置导致app内嵌网页布局乱掉的其中一种问题解决

1,932 阅读2分钟

对app内嵌网页接触不多,这里描述的是一种内嵌网页布局乱掉的可能原因:

关键字:“webview控件”、“setUseWideViewPort属性”、“meta标签”

参考文章: Android开发填坑之setUseWideViewPort

情景

  1. 近期接到一个bug反馈,说一份网页代码放在一个第三方提供的app内显示布局乱掉了,但是这份代码在手机端浏览器是可以正常显示的;

简单的处理过程

  1. 简单review代码,发现是通过动态修改meta标签实现的自适应,在手机端浏览器或者公司的app内打开这个网页都是ok的,看一下有bug的app内页面效果,感觉貌似是缩放的问题;

  2. 查了下这个app内webview的UA,发现是很常规的webkit内核,不是浏览器内核的问题,然后我回过头修改代码,换些写法,更改自适应meta标签的实现,或者改用rem单位,或者采用scale缩放,都不能达到我想要的效果,换种思路;

  3. 总体来说,这份代码应该问题不大,因为在公司开发的app内,手机端浏览器都是正常显示的,那同一个手机,为什么在第三方开发的那个app内打开这个网页就不行了呢?怀疑比较大概率是他们的安卓的设置不搭,询问安卓同事,说安卓可以对webview控件做一些参数的设置,包括缩放等一堆设置;

  4. 联系第三方app的安卓,总的一句话就是,为什么同样一份网页代码在我们APP内可以,在你们APP内就不行了,怀疑你们的webview参数设置不同,比照下我们的参数应该就能找到问题;

  5. 通过比较发现是这样子一个参数没做设置,这个参数文档上说是关于webview控件是否支持<meta>标签的viewport属性,最后安卓开发添加该参数后,布局错乱问题解决;

    webSettings.setUseWideViewPort(true);

至此问题解决

关于调试app内嵌网页的简单拓展思路

  1. 因为第三方app不好改安卓的代码,或者说让他们打一个测试的包,所以需要调试内嵌web页面可以考虑通过更改Host域名指向的方法实现,将跳转的路径指向自己的测试地址;