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

两种情况一起使用 实现 不同分辨率 不同 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);
            }
posted @ 2024-05-15 17:30  孙凯亮  阅读(107)  评论(0)  编辑  收藏  举报