解决 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
目录
相关文章
|
2月前
|
程序员 开发工具 Android开发
Android|WebView 禁止长按,限制非白名单域名的跳转层级
如何限制 WebView 仅域名白名单网址能随意跳转,并禁用长按选择文字。
34 2
|
3月前
|
编解码 开发工具 Android开发
Android平台实现屏幕录制(屏幕投影)|音频播放采集|麦克风采集并推送RTMP或轻量级RTSP服务
Android平台屏幕采集、音频播放声音采集、麦克风采集编码打包推送到RTMP和轻量级RTSP服务的相关技术实现,做成高稳定低延迟的同屏系统,还需要有配套好的RTMP、RTSP直播播放器
|
6月前
|
安全 JavaScript 前端开发
kotlin开发安卓app,JetPack Compose框架,给webview新增一个按钮,点击刷新网页
在Kotlin中开发Android应用,使用Jetpack Compose框架时,可以通过添加一个按钮到TopAppBar来实现WebView页面的刷新功能。按钮位于右上角,点击后调用`webViewState?.reload()`来刷新网页内容。以下是代码摘要:
|
6月前
|
JavaScript 前端开发 Android开发
kotlin安卓在Jetpack Compose 框架下使用webview , 网页中的JavaScript代码如何与native交互
在Jetpack Compose中使用Kotlin创建Webview组件,设置JavaScript交互:`@Composable`函数`ComposableWebView`加载网页并启用JavaScript。通过`addJavascriptInterface`添加`WebAppInterface`类,允许JavaScript调用Android方法如播放音频。当页面加载完成时,执行`onWebViewReady`回调。
|
5月前
|
Web App开发 JavaScript 前端开发
Android端使用WebView注入一段js代码实现js调用android
Android端使用WebView注入一段js代码实现js调用android
126 0
|
6月前
|
安全 网络安全 API
kotlin安卓开发JetPack Compose 如何使用webview 打开网页时给webview注入cookie
在Jetpack Compose中使用WebView需借助AndroidView。要注入Cookie,首先在`build.gradle`添加WebView依赖,如`androidx.webkit:webkit:1.4.0`。接着创建自定义`ComposableWebView`,通过`CookieManager`设置接受第三方Cookie并注入Cookie字符串。最后在Compose界面使用这个自定义组件加载URL。注意Android 9及以上版本可能需要在网络安全配置中允许第三方Cookie。
|
API Android开发 数据安全/隐私保护
解决android webview 加载http url 失败 net::ERR_CLEARTEXT_NOT_PERMITTED 错误
解决android webview 加载http url 失败 net::ERR_CLEARTEXT_NOT_PERMITTED 错误
1013 0
|
6月前
|
Web App开发 移动开发 前端开发
52. 【Android教程】网页视图:WebView
52. 【Android教程】网页视图:WebView
96 1
|
Android开发 iOS开发 UED
Android webView 实现阻尼回弹效果
iOS webView默认滑动到顶部或者底部的时候,还可以继续通过手指拉扯滑动,松手后回弹;而Android webView默认是不行的,要实现跟iOS一样的效果,就需要自定义webView。
590 0
|
7月前
|
JavaScript 前端开发 Android开发
android开发,使用kotlin学习WebView(详细)
android开发,使用kotlin学习WebView(详细)
516 0