解决 android 高低版本 webView 里内容 自适应屏幕的终极方法
转载请声明出处(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 绝壁有效,我给出个例子:
- "<style>"+
- "img{" +
- "max-width:100%;" +
- "height:auto}" +
- "video{"+
- "max-width:100%;"+
- "height:auto}"+
- "</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 包在函数里面。
四,打完收工
有问题请留言。
解决 android 高低版本 webView 里内容 自适应屏幕的终极方法的更多相关文章
- Css:背景色透明,内容不透明之终极方法!兼容所有浏览器
转载 http://www.cnblogs.com/jikey/archive/2012/08/31/2665880.html <!DOCTYPE html PUBLIC "-//W3 ...
- Android 各个版本WebView
转载请注明出处 http://blog.csdn.net/typename/ powered by miechal zhao : miechalzhao@gmail.com 前言: 根据Googl ...
- 安卓开发学习笔记(五):史上最简单且华丽地实现Android Stutio当中Webview控件https/http协议的方法
一.我们先在XML当中自定义一个webview(Second_layout.xml) 代码如下: <?xml version="1.0" encoding="utf ...
- css布局-内容自适应屏幕
css页面布局,实现内容部分自适应屏幕,当内容高度小于浏览器窗口高度时,页脚在浏览器窗口底部:当内容高度高于浏览器窗口高度时,页脚自动被撑到页面底部. <style type="tex ...
- 解决Opencv高低版本不兼容问题
目前OpenCV版本已更新到2.4...由此出现了一系列问题,解决如下: 1.cxcore.h等头文件找不到: 法一.将opencv1.0中的各种.h或者.lib文件拷到opencv2.3.1对应in ...
- Android自适应屏幕的实现方法
首先我们先了解下手机分辨率 分辨率是指屏幕上有横竖各有多少个像素目前手机分辨率大概情况如下: QVGA 分辨率:320×240 简 介:QVGA即"Quarter VGA". ...
- Android测试(四)——内容供应器泄露
内容供应器:用来存储和查询应用程序中的数据或来自电话的数据,所有内容供应器都具有唯一的统一的资源标识符(URI)以便被识别和查询. 内容供应期命名惯例:以content://开始 当Android A ...
- Android : 如何在WebView显示的页面中查找内容
Android : 如何在WebView显示的页面中查找内容 Author : Aoyousatuo Zhao http://blog.sina.com.cn/aoyousatuo WebView是A ...
- (转)完美解决 Android WebView 文本框获取焦点后自动放大有关问题
完美解决 Android WebView 文本框获取焦点后自动放大问题 前几天在写一个项目时,要求在项目中嵌入一个WebView 本来很快就完成了,测试也没有问题.但发给新加坡时,他们测试都会出现文本 ...
随机推荐
- 《社交网络》里的评分公式——ELO排名系统
<社交网络>里的Mark Zackburg被女朋友甩后,在舍友的启发下,充分发挥了技术宅男自娱自乐的恶搞天分,做出了Facemash网站,对学校女生的相貌进行排名打分,结果网站访问流量过大 ...
- 基于thinkphp的省略图便捷函数
/** * 生成缩略图 * @param string $image 原图路径 例:thumb_5242d9082fcdc.jpg * @param string $type 图像格式 * @para ...
- CentOS6.4安装JDK1.7
安装说明 1.安装环境: CentOS6.4 64位系统 2.安装方式:rpm安装 3.软 件 包:jdk-7u71-linux-x64.rpm 4.下载地址:http://www.oracle.co ...
- Replace 删除、替换函数精解示例
'************************************************************************* '**模 块 名:Replace函数精解示例 '* ...
- mongodb搭建和基本语法
下载安装包 https://fastdl.mongodb.org/win32/mongodb-win32-x86_64-2008plus-ssl-3.0.0-signed.msi?_ga=1.2206 ...
- 测试MailUtils,作用是发邮件
package cn.itcast.test; import java.io.IOException; import javax.mail.MessagingException; import jav ...
- Linux模块机制浅析
Linux模块机制浅析 Linux允许用户通过插入模块,实现干预内核的目的.一直以来,对linux的模块机制都不够清晰,因此本文对内核模块的加载机制进行简单地分析. 模块的Hello World! ...
- MySQL COLUMNS分区
200 ? "200px" : this.width)!important;} --> 介绍 COLUMN分区是5.5开始引入的分区功能,只有RANGE COLUMN和LIS ...
- 谁占了我的端口 for Windows
这篇文章发布于我的 github 博客:原文 今天在本地调试 Blog 的时候意外的出现了一些错误:127.0.0.1 4000 端口已经被其他的进程占用了.如何找到占用端口的进程呢? Configu ...
- Hadoop学习笔记——搭建
一搭建环境列表 操作系统:centos6.5 64位 JDK环境:jdk1.7.0_71 hadoop版本:社区版本2.7.2,hadoop-2.7.2-src.tar.gz 主机名 ip 角色 用户 ...