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

转载请声明出处(https://cloud.tencent.com/developer/user/1148436/activities)

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

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

四,打完收工

      有问题请留言。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏哲学驱动设计

WindowsMobile/Win Form-界面自适应

起因     使用SmartPhone上的WinForm做了一个WM的小程序,结果放到手机上实际一运行。发现动态生成的控件在里面显示得都非常小,难以看清。 原因...

1617
来自专栏Google Dart

为Flutter应用程序添加交互性 顶

你如何修改你的应用程序,使其对用户输入做出反应? 在本教程中,您将为仅包含非交互式小部件的应用添加交互性。 具体来说,您将通过创建一个管理两个无状态小部件的自定...

962
来自专栏编程微刊

微信小程序从零开始开发步骤(四)自定义分享的功能

1284
来自专栏AhDung

【C#】组件分享:FormDragger窗体拖拽器

类似QQ、迅雷等讲究UI体验的软件,都支持在窗口内多处地方拖动窗口,而不必老实巴交的去顶部标题栏拖,这个组件就是让winform也能这样随性拖拽,随性度或更甚。...

552
来自专栏偏前端工程师的驿站

CSS魔法堂:改变单选框颜色就这么吹毛求疵!

 是否曾经被业务提出"能改改这个单选框的颜色吧!让它和主题颜色搭配一下吧!",然后苦于原生不支持换颜色,最后被迫自己手撸一个凑合使用。若抛开input[type...

573
来自专栏木宛城主

ASP.NET MVC使用Bootstrap系列(2)——使用Bootstrap CSS和HTML元素

Bootstrap提供了一套丰富CSS设置、HTML元素以及高级的栅格系统来帮助开发人员快速布局网页。所有的CSS样式和HTML元素与移动设备优先的流式栅格系统...

3138
来自专栏我和未来有约会

SplashScreenSource的妙用

默认初始屏幕体验 在托管 API 下为 Silverlight 定义的默认体验是:超出某一时间阈值(约为 0.5 秒)的任何加载都将在内容区域中显示基于 XA...

1829
来自专栏陈仁松博客

UWP基础教程 - AuotmationProperties.Name

作为Windows10 UWP开发,大家应该会在很多示例DEMO里面看到AuotmationProperties.Name这个属性吧 <Button Autom...

3255
来自专栏kwcode

asp.net动态解析用户控件(UserControl)

模块化的时候需要用到: #region asp.net解析用户控件 /// <summary> /// asp....

34410
来自专栏我和未来有约会

SplashScreenSource的妙用

默认初始屏幕体验 在托管 API 下为 Silverlight 定义的默认体验是:超出某一时间阈值(约为 0.5 秒)的任何加载都将在内容区域中显示基于 XA...

1797

扫码关注云+社区