两种情况一起使用 实现 不同分辨率 不同 dpi 缩放自适应处理

//webview 需要配置

mWebView.getWebSetting().setUseWideViewPort(true);//让webview读取网页设置的viewport，pc版网页

1、同分辨率 不同dpi 缩放自适应处理 ( 也可以在android端 注入相关js 代码)

<script type="text/javascript">

<!-- 针对 Android 【不同 dpi】 适配处理 同分辨率 不同 dpi 显示一致 -->

var ua = navigator.userAgent;

if (/Android (\d+\.\d+)/.test(ua)){

<!-- 需要在页面加载时候 生效 才能有效 -->

var devicePixelRatio = window.devicePixelRatio;

var deviceScale = 1/devicePixelRatio;

document.write('<meta name="viewport" content="width=device-width,initial-scale='+deviceScale+',minimum-scale='+deviceScale+',maximum-scale='+deviceScale+',user-scalable=no">');

}

</script>

2、同dpi 不同分辨率 缩放自适应处理

   @Override

            public void onPageFinished(WebView webView, String url) {

                super.onPageFinished(webView, url);

                /**

                 * 针对 web 页面 【不同分辨率】 适配处理   同dpi 不同分辨率 显示一致

                 *  zoom = 100%    分辨率 1920 * 1080   Ui设置设计出来合适的 也是body标签默认未设置zoom属性的或者100%  例子 <body style="zoom: 50%;">

                 *  zoom = 66.67%     分辨率 1280 * 720

                 *  zoom = 71.14%     分辨率 1366 * 768

                 *  zoom = 106.67%     分辨率 2048 * 1152

                 *  zoom = 83.33%     分辨率 1600 * 900

                 *  zoom = 50%     分辨率 960 * 540

                 */

                float widthPixels = getResources().getDisplayMetrics().widthPixels;

                float heightPixels = getResources().getDisplayMetrics().heightPixels;

                Log.d("zfq", "widthPixels:" + widthPixels);

                Log.d("zfq", "heightPixels:" + heightPixels);

                float zoomPercent = widthPixels / 1920 * 100;

                Log.d("zfq", "zoomPercent:" + zoomPercent);

                String javaScriptInterfaceName_zoomWeb_NeedInjectJsStr =

                        "javascript:(function(){  document.body.style.zoom='" + zoomPercent + "%'; })()";

                mWebView.loadUrl(javaScriptInterfaceName_zoomWeb_NeedInjectJsStr);

            }

Android WebView 加载 html页面 实现 不同分辨率 不同 dpi 缩放自适应处理 解决方案的更多相关文章

  1. Android WebView加载本地html并实现Java与JS交互

    最近做的一个项目中,用到自定义地图,将自定义地图转换成html页面,现在需要做的是如何将本地的html加载到android中,并可以实现交互. 相关讲解: 其实webview加载资源的速度并不慢,但是 ...

  2. 转:Android Webview 加载外部html时选择加载本地的js,css等资源文件

    原文地址:http://m.blog.csdn.net/blog/qduningning/43196819 在使用WebView加载网页的时候,有一些固定的资源文件如js的jquery包,css,图片 ...

  3. Android WebView 加载网页

    通过Android 中 WebView 控件加载HTML5 页面,这是实现Android 混合开发的基础. 选择加载的网页可以是本地,也可用使远程的.需要添加访问互联网的权限:<uses-per ...

  4. Android WebView 加载富文本内容

    WebView加载数据的方式有两种: 1. webView.loadUrl(data);//加载url 2. webView.loadDataWithBaseURL(null,data, " ...

  5. Android使用WebView加载H5页面播放视频音频，退出后还在播放问题解决

    Android中经常会使用到WebView来加载H5的页面,如果H5页面中有音频或者视频的播放时,还没播放完就退出界面,这个时候会发现音频或者视频还在后台播放,这就有点一脸懵逼了,下面是解决方案: 方 ...

  6. android webview 加载本地html 实现 与 java 之间的相互响应

    1.布局 <?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:androi ...

  7. android webview加载网络连接

    webview = (WebView) findViewById(R.id.webview); WebSettings webSettings = webview.getSettings(); //设 ...

  8. Android WebView 加载超长 JS 数据

    在之前的文章里面,我总结过WebView如何与网页交互,也就是Java如何和JS交互 —— Android WebView 总结 —— Java和JavaScript交互. 基于这篇文章,我们基本上能 ...

  9. webview加载本地页面

    main.xml中布局webview,activity中设置如下 MyWebView=(WebView)findViewById(R.id.webView1); MyWebView.requestFo ...

  10. Android webView加载图片显示过大的问题

    webview的基本使用流程这里我就不重复说明了,本篇针对的是文章详情加载完成后出现的情况,这里我们使用的方法是:通过js脚本,重置img标签中图片的宽度和高度. 使用步骤: 1.此方法需要使用js, ...

随机推荐

  1. Linux嵌入式所有知识点-思维导图-【一口君吐血奉献】

    一.前言 很多粉丝问我,我的Linux和嵌入式当初是如何学习的? 其实彭老师在最初学习的过程中,走了相当多的弯路: 有些可以不学的花了太多的时间去啃 有些作为基础必须优先学习的,却忽略了, 结果工作中 ...

  2. 配置 Windows Boot Manager

    配置 Windows Boot Manager 通常需要使用 bcdedit 命令,这是一个命令行工具,用于管理 Boot Configuration Data (BCD) 存储.BCD 存储包含了启 ...

  3. LaTeX 生成黑底白字的 PDF

    最近需要深夜看论文,然而白底的 PDF 看久了眼睛很难受,想转换成黑底的.正好我有论文的 LaTeX 源码,因此可以直接编译黑底的 PDF 出来. 使用 darkmode 宏包 CTAN 上有一个 L ...

  4. Redis解读（5）：Redis深入理解及生产高可用

    Redis单线程如何处理高并发 1.阻塞IO 与 非阻塞 IO Java 在 JDK1.4 中引入 NIO,但是也有很多人在使用阻塞 IO,这两种 IO 有什么区别? 在阻塞模式下,如果你从数据流中读 ...

  5. Android 国际化：新增越南语语系（Java）

    前提: 1. 在res文件夹中,新增values-vi文件夹(越南语文件夹) 2. 在步骤1的文件夹中,新增strings.xml 背景: 1. targetSdkVersion 29 2. Jdk ...

  6. three.js实现太阳系

    前言 刚开始使用three.js时会不太熟悉,想写一些项目增加理解,网上翻了好多文章,不是画立方体就是画三角形,最后偶然看到这个网站,十分炫酷. 我们也许没那么牛逼,但我们可以整个简略版的太阳系来练练 ...

  7. 分布式缓存应用场景与redis持久化机制

    redis 参考目录: 生产级Redis 高并发分布式锁实战1:高并发分布式锁如何实现 https://www.cnblogs.com/yizhiamumu/p/16556153.html 生产级Re ...

  8. GitHub Copilot 典型使用场景实践

    大家好,我是Edison. 近期我们一直在使用GitHub Copilot协助开发编码工作,总结了一些实际场景的用法,可能在目前网络中很多的博客中都没有提及到,本文一一分享给你. 简介:你的结对编程伙 ...

  9. GitHub Star 数量前 13 的自托管项目清单

    一个多月前,我们撰写并发布了这篇文章<终极自托管解决方案指南>.在那篇文章里我们深入探讨了云端服务与自托管方案的对比.自托管的潜在挑战.如何选择适合自托管解决方案,并深入介绍了五款涵盖不同 ...

  10. JavaScript – Generator Function

    参考 阮一峰 – Generator 函数的语法 介绍 Generator Function 是一种特别的函数, 它让函数有一种分阶段执行的能力. 一般的函数, 你调用它, 它执行所有函数内的代码, ...