Android WebView 加载 html页面实现不同分辨率不同 dpi 缩放自适应处理解决方案

最新推荐文章于 2025-05-29 21:31:10 发布

路易斯睿齐

最新推荐文章于 2025-05-29 21:31:10 发布

阅读量4.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Android 解决方案文章标签： webview dpi 分辨率缩放比自适应

本文链接：https://blog.youkuaiyun.com/RichieZhu/article/details/79217931

Android 解决方案专栏收录该内容

26 篇文章

订阅专栏

本文介绍了如何处理Android WebView在面对不同分辨率和DPI设备时的缩放自适应问题。通过结合使用两种方法，可以实现对同分辨率不同DPI以及同DPI不同分辨率情况的有效适配，确保HTML页面在各种设备上显示正常。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

两种情况一起使用实现不同分辨率不同 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);
            }