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

转载 2017年01月03日 14:38:06

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

      我的项目要求是这样的,先从数据库里面拿出来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。
1
2
3
4
5
6
7
"<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 包在函数里面。

 

四,打完收工

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

http://www.cnblogs.com/linguanh/p/4927353.html 解决 android 高低版本 webView 里内容 自适应屏幕的终极方法 转载请声...

Android webView 图片内容自适应屏幕

最近项目用到webview显示后台返回的富文本编辑器生成的html代码. 网上给出的方法基本如下: WebSettings settings = webView.getSettings();  set...

暂时解决了Android webview组件中显示SVG自适应屏幕问题

SVG图形在网页及android中自适应问题

13、Android Webview图片自适应屏幕解决方案

图片过大,通过设置webview后字体又超小。网上的方法千篇一律尝试过程:1、设置// mWebview.getSettings().setUseWideViewPort(true);//让we...

android webview自适应屏幕大小

前几天修改C1眼镜管家V2.0版本的时候,测试出NBD注册网页在手机上显示的时候出现不适应屏幕的情况,参考网上帖子后,自己写了一个小的demo试验了一下,结果问题解决了,在这里记录一笔。 demo的布...

android webview自适应屏幕

android方面的开发,包括手机端和机顶盒,也就是智能电视方面端的开发过程中,都不可避免的需要使用到webview,而针对于不同的分辨率而言,webview也需要做到自适应屏幕。那么,他应该怎样才能...
  • gan303
  • gan303
  • 2015年12月10日 09:10
  • 1996

iOS:webView中图片自适应屏幕的一种解决方案

ImageAutoFitInWebView结合JS解决用webVIew加载图片时图片自动适配屏幕的问题1、在标哥的博客中WebView图片自适应屏幕中,标哥提供了一种解决方案,然后我就试验了一下。发现...

webview自适应屏幕

  • 2015年11月29日 22:30
  • 1.13MB
  • 下载

【iOS-cocos2d-X 游戏开发之十六】配置你的Cocos2dx项目编译后的Android自动使用(-hd)高清图&设置Android自适应屏幕、缩放比例方法!

本站文章均为 李华明Himi 原创,转载务必在明显处注明:转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/android-game/799.html   ...

Android应用程序自适应屏幕大小的解决办法

android应用自适应多分辨率的解决方法  1. 首先是建立多个layout文件夹(drawable也一样)。 在res目录下建立多个layout文件夹,文件夹名称为layout-800x4...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:解决 android 高低版本 webView 里内容 自适应屏幕的终极方法
举报原因:
原因补充:

(最多只允许输入30个字)