现象

项目中的“浏览器组件”（对Webview的封装，用于浏览网页）在加载bilibili个人主页(https://m.bilibili.com/space/26233856)时排版错乱。
效果如下图所示：

正常的效果如下图所示：（使用chrome UA换成Android的UA）

分析

使用对比法看看其它浏览器（Anroid chrome,手机自带浏览顺，UC浏览器）的效果，都正常
初步结论就是我们自己的问题了（打开的方式不对！！）
接着 排除法，先看看是不是UA的问题，把chrome的UA换成我们应用的UA，效果也正常。
那只能去看使用Webview的配置了
通过review代码找到了webview settings的配置代码

private void initBrowserFeature(){WebSettings webSettings = getSettings();webSettings.setLoadWithOverviewMode(true);webSettings.setUseWideViewPort(false);//这里需要设置为true，才能让Webivew支持<meta>标签的viewport属性......

看看Android api 文档的说明 >> setUseWideViewPort

经验

使用Webiew时最好设置setUseWideViewPort为true

页面

bilibili个人主页,html代码如下，注意红圈处的代码（viewport参数的设置）

Android开发填坑之setUseWideViewPort相关推荐

【解决方案】Android开发填坑之RecyclerView刷新闪烁
问题描述 RecyclerView数据刷新闪烁. 问题原因分析 RecyclerView有一个RecyclerViewPool用来缓存已创建的item,不手动创建RecyclerViewPool时,系 ...
Android项目开发填坑记-Fragment的onAttach
背景现在Android开发多使用一个Activity管理多个Fragment进行开发,不免需要两者相互传递数据,一般是给Fragment添加回调接口,让Activity继承并实现. 回调接口一般都写 ...
为微信开发填坑：微信网页支付的开发流程及填坑技巧 1
GitChat 作者:极笔北客原文:为微信开发填坑:微信网页支付的开发流程及填坑技巧关注微信公众号:「GitChat 技术杂谈」一本正经的讲技术 [不要错过文末彩蛋] 小程序作为微信之父张小龙钦 ...
Java web 开发填坑记 2 -如何正确的创建一个Java Web 项目
转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/72566261 本文出自[赵彦军的博客] Java web 开发填坑记 1-如何正确 ...
为微信开发填坑：微信网页支付的开发流程及填坑技巧
GitChat 作者:极笔北客原文:为微信开发填坑:微信网页支付的开发流程及填坑技巧关注微信公众号:「GitChat 技术杂谈」一本正经的讲技术 [不要错过文末彩蛋] 小程序作为微信之父张小龙钦 ...
Android Studio 填坑指南
前几天发布了一篇名为<Android Studio 安装.配置及第一个程序演示>的博文,有不少童鞋都认真阅读过并照步骤一步一步操作了一遍,有滴如期成功地装好了,然鹅有滴反映说这不对呀,为森 ...
Android Tips - 填坑手册
转载自汤奇V分享的Android-Tips 学习 Android 至今,大大小小的坑没少踩,庆幸的是,在强大的搜索引擎与无私奉献的人们的帮助下,我遇到的坑都顺利地被填平了. 为了便于日后遇到同样的问题 ...
Android开发踩坑之旅
在此记录一些Android开发中的踩坑记录,仅供复习和参考问题:小米 MIUI系统相机无法调用 Camer2 新Api的问题过程:在运行 Android-23 Samples 中 media文件 ...
Android 项目开发填坑记 - 使用 MultiDex 解决 64K 限制
如果移动端访问不佳,请访问 –> Github版背景 Android 的 classLoader 在加载 APK 的时候限制了class.dex 包含的 Java 方法数,其总数不能超过655 ...
Android 项目开发填坑记 - 谷歌商店上架被拒 Apps On Device
关键词:谷歌商店被拒.数据安全表单.已安装应用.Policy Declaration.Data Safety Section.App Activity Data Type.Apps On Device ...

Android开发填坑之setUseWideViewPort

现象

分析

经验

页面

Android开发填坑之setUseWideViewPort相关推荐

最新文章

热门文章