解决 android 高低版本 webView 里内容 自适应屏幕的终极方法

简介: 转载请声明出处(http://www.cnblogs.com/linguanh/)    一,先说下我的情况,大家可以对号入座(嫌无聊请跳过)       我的项目要求是这样的,先从数据库里面拿出来html标签,因为加载到移动端的网页内容是用户在网页编辑好了之后提交到服务器的,即网页内容是 b...

转载请声明出处(http://www.cnblogs.com/linguanh/)

 

 先说下我的情况,大家可以对号入座(嫌无聊请跳过)

      我的项目要求是这样的,先从数据库里面拿出来html标签,因为加载到移动端的网页内容是用户在网页编辑好了之后提交到服务器的,即网页内容是 b/s 交互,我在网页前段编辑器里面设置了只保存编辑的 html 标签,即是没有头部和后面的,形式是:

<html>

   <body>

       只保存这里的标签到数据库

   </body>

</html>

     移动端有两个activity,这时候是 c/s 交互了,页面一负责加载前置数据,例如一张封面图之类的,然后用户点击进入webView主体,我上面说了,我的目标html标签是保存到db的,所以我在第一个页面的时候就把db里面的html下载保存到内存了,String即可,用户点击时,跳转传递。看到这里,相信你知道我是加载到webView的了,没错,就是组合,再load。注意了,我这里并不是直接加在一个链接,不是 webView.loadUrl() 是组合好 html 后再使用 loadDataWithBaseUrl。

 

 说下标签不同的影响(很重要,因为某些方法对某些表情有用)

      通常,我们加载后超出屏幕宽度的一般是 img 或者 video 标签或者文字,这类标签可以使用css 或者 网上盛行的三个设置做到适配,这三个盛行的设置是:

setting.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
setting.setUseWideViewPort(true);
setting.setLoadWithOverviewMode(true);

我先说明,这三个设置不一定有效,android 4.4 后就很可能没效,为什么是很可能?你都不敢确定?上面说过,和标签及其设置有关系。
如果出现了 table 这种标签,即 table 适配屏幕,很可能css都失效,怎么办?,我就是遇到了它,所以有了这篇文章。

三,三种解决方法(重点)。
针对我的自己情况,自己组合html显示的。
法一:
使用 Css 适配,它比上面的三种 setting 有效,对img 和video 绝壁有效,我给出个例子:
1 "<style>"+
2  "img{" +
3         "max-width:100%;" +
4          "height:auto}" +
5  
6  "video{"+
7             "max-width:100%;"+
8              "height:auto}"+
9   "</style>" +
 

        法二:使用三种setting设置:          

        setting.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
setting.setUseWideViewPort(true);
setting.setLoadWithOverviewMode(true);
这种方法的失败可能性很大,但是,也可以一试

法三:使用javaScript脚本,暂时给它定义成功率是 100%(因为我用它没失效过)
我这里给一个例子,例如我上面说到的 table。
"<script type=\"text/javascript\">"
     "var tables = document.getElementsByTagName('table');" + // 找到table标签
       "for(var i = 0; i<tables.length; i++){" +  // 逐个改变
              "tables[i].style.width = '100%';" +  // 宽度改为100%
               "tables[i].style.height = 'auto';" +
         "}" +
  "</script>"+

                看到这里,你很可能会说,这和 css 有什么区别?区别可大了,我使用 css 改变table的失败了,使用它成功了。

                 说明一下: 上面使用 js 脚步适配,请写到 内容加载之后,即是 <body> 内容 <写后面></body>,为什么呢?有基础的人都知道,html 是解析性语言,从上到下,你要先加载好 html 再使用 js 改变,除非js 包在函数里面。

 

四,打完收工

      有问题请留言。

如果您认为这篇文章还不错或者有所收获,您可以通过扫描一下下面的支付宝二维码 打赏我一杯咖啡【物质支持】,也可以点击右下角的【推荐】按钮【精神支持】,因为这两种支持都是我继续写作,分享的最大动力


img_12e3f54d4d0f70f0eb14f20548e3d781.png
目录
相关文章
|
10月前
|
Android开发 开发者
Android自定义view之利用drawArc方法实现动态效果
本文介绍了如何通过Android自定义View实现动态效果,重点使用`drawArc`方法完成圆弧动画。首先通过`onSizeChanged`进行测量,初始化画笔属性,设置圆弧相关参数。核心思路是不断改变圆弧扫过角度`sweepAngle`,并调用`invalidate()`刷新View以实现动态旋转效果。最后附上完整代码与效果图,帮助开发者快速理解并实践这一动画实现方式。
238 0
|
8月前
|
存储 机器学习/深度学习 API
Android API Level 到底是什么?和安卓什么关系?应用发布如何知道自己的版本?优雅草卓伊凡
Android API Level 到底是什么?和安卓什么关系?应用发布如何知道自己的版本?优雅草卓伊凡
1231 31
Android API Level 到底是什么?和安卓什么关系?应用发布如何知道自己的版本?优雅草卓伊凡
|
8月前
|
安全 数据库 Android开发
在Android开发中实现两个Intent跳转及数据交换的方法
总结上述内容,在Android开发中,Intent不仅是活动跳转的桥梁,也是两个活动之间进行数据交换的媒介。运用Intent传递数据时需注意数据类型、传输大小限制以及安全性问题的处理,以确保应用的健壯性和安全性。
540 11
|
人工智能 搜索推荐 物联网
Android系统版本演进与未来展望####
本文深入探讨了Android操作系统从诞生至今的发展历程,详细阐述了其关键版本迭代带来的创新特性、用户体验提升及对全球移动生态系统的影响。通过对Android历史版本的回顾与分析,本文旨在揭示其成功背后的驱动力,并展望未来Android可能的发展趋势与面临的挑战,为读者呈现一个既全面又具深度的技术视角。 ####
|
移动开发 安全 Java
Android历史版本与APK文件结构
通过以上内容,您可以全面了解Android的历史版本及其主要特性,同时掌握APK文件的结构和各部分的作用。这些知识对于理解Android应用的开发和发布过程非常重要,也有助于在实际开发中进行高效的应用管理和优化。希望这些内容对您的学习和工作有所帮助。
1424 83
|
存储 Shell Android开发
基于Android P,自定义Android开机动画的方法
本文详细介绍了基于Android P系统自定义开机动画的步骤,包括动画文件结构、脚本编写、ZIP打包方法以及如何将自定义动画集成到AOSP源码中。
844 2
基于Android P,自定义Android开机动画的方法
|
Android开发
基于android-11.0.0_r39,系统应用的手动签名方法和过程
本文介绍了基于Android 11.0.0_r39版本进行系统应用手动签名的方法和解决签名过程中遇到的错误,包括处理`no conscrypt_openjdk_jni-linux-x86_64`和`RegisterNatives failed`的问题。
865 2
|
11月前
|
Java API 开发工具
Android cmdline-tools版本与最小JDK的关系
总的来说,Android的命令行工具和JDK之间的关系就像是一场舞会,两者需要彼此配合,才能共同创造出美妙的舞蹈。如果选择了不合适的舞伴(即不兼容的版本),可能会导致舞蹈中的步伐混乱,甚至无法完成舞蹈。而即使选择了合适的舞伴,也需要考虑舞伴的舞蹈技巧(即性能和稳定性),才能确保舞蹈的完美表现。因此,选择合适的Android命令行工具和JDK版本,是每一个Android开发者都需要面对的重要决定。
347 13
|
安全 开发工具 Android开发
【Android Git】Git版本回退方式
在实际操作中,选择合适的版本回退方式,可以有效地管理代码版本,提高开发效率和代码质量。
692 26
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
845 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex