Android WebView 加載 html頁面實現不同分辨率不同 dpi 縮放自適應處理解決方案

原創

2020-02-21 22:13

兩種情況一起使用實現不同分辨率不同 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);
            }