WebView設定自適應螢幕大小
阿新 • • 發佈：2018-12-23
第一種：
settings.setUseWideViewPort(true);
settings.setLoadWithOverviewMode(true);
第二種：
WebSetting settings = webView.getSettings();
settings.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
把所有內容放在webview等寬的一列中。（可能會出現頁面中連結失效）
第三種：
DisplayMetrics metrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics);
int mDensity = metrics.densityDpi;
if (mDensity == 120) {
settings.setDefaultZoom(ZoomDensity.CLOSE);
}else if (mDensity == 160) {
settings.setDefaultZoom(ZoomDensity.MEDIUM);
}else if (mDensity == 240) {
settings.setDefaultZoom(ZoomDensity.FAR);
}
這方法可以讓你的頁面適應手機螢幕的解析度，完整的顯示在螢幕上，可以放大縮小。
例如適合800px寬度的頁面，如果通過WebView在1024px的螢幕寬度下顯示時，內容(圖片)會被放大，整體頁面會超出螢幕。
試了將WebView的settings中的縮放都關閉了也不行。
後來發現了WebSettings.ZoomDensity這個設定，並在文件中找到了以下說明：
Enum for specifying the WebView's desired density. FAR makes 100% looking like in 240dpi MEDIUM makes 100% looking like in 160dpi CLOSE makes 100% looking like in 120dpi
這樣就能很好的說明以上問題的原因了，又是密度惹的禍...
預設WebView的ZoomDensity是MEDIUM，對應160dpi。而我之前800px寬度的螢幕對應的是60dpi，1024px寬度的螢幕對應的是240dpi。所以，頁面在高解析度的螢幕上被放大了1.5倍。這個和圖片自縮放的機制是一樣的。
於是，只要通過當前螢幕的密度，動態設定該屬性就能適應不同螢幕（當然，預設你的頁面是針對160dpi的密度大小設計的）,即可解決：
int screenDensity = getResources().getDisplayMetrics().densityDpi ;
WebSettings.ZoomDensity zoomDensity = WebSettings.ZoomDensity.MEDIUM ;
switch (screenDensity){
case DisplayMetrics.DENSITY_LOW :
zoomDensity = WebSettings.ZoomDensity.CLOSE;
break;
case DisplayMetrics.DENSITY_MEDIUM:
zoomDensity = WebSettings.ZoomDensity.MEDIUM;
break;
case DisplayMetrics.DENSITY_HIGH:
zoomDensity = WebSettings.ZoomDensity.FAR;
break ;
}
webSettings.setDefaultZoom(zoomDensity);
settings.setUseWideViewPort(true);
settings.setLoadWithOverviewMode(true);
第二種：
WebSetting settings = webView.getSettings();
settings.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
把所有內容放在webview等寬的一列中。（可能會出現頁面中連結失效）
第三種：
DisplayMetrics metrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics);
int mDensity = metrics.densityDpi;
if (mDensity == 120) {
settings.setDefaultZoom(ZoomDensity.CLOSE);
}else if (mDensity == 160) {
settings.setDefaultZoom(ZoomDensity.MEDIUM);
}else if (mDensity == 240) {
settings.setDefaultZoom(ZoomDensity.FAR);
}
這方法可以讓你的頁面適應手機螢幕的解析度，完整的顯示在螢幕上，可以放大縮小。
例如適合800px寬度的頁面，如果通過WebView在1024px的螢幕寬度下顯示時，內容(圖片)會被放大，整體頁面會超出螢幕。
試了將WebView的settings中的縮放都關閉了也不行。
後來發現了WebSettings.ZoomDensity這個設定，並在文件中找到了以下說明：
Enum for specifying the WebView's desired density. FAR makes 100% looking like in 240dpi MEDIUM makes 100% looking like in 160dpi CLOSE makes 100% looking like in 120dpi
這樣就能很好的說明以上問題的原因了，又是密度惹的禍...
預設WebView的ZoomDensity是MEDIUM，對應160dpi。而我之前800px寬度的螢幕對應的是60dpi，1024px寬度的螢幕對應的是240dpi。所以，頁面在高解析度的螢幕上被放大了1.5倍。這個和圖片自縮放的機制是一樣的。
於是，只要通過當前螢幕的密度，動態設定該屬性就能適應不同螢幕（當然，預設你的頁面是針對160dpi的密度大小設計的）,即可解決：
int screenDensity = getResources().getDisplayMetrics().densityDpi ;
WebSettings.ZoomDensity zoomDensity = WebSettings.ZoomDensity.MEDIUM ;
switch (screenDensity){
case DisplayMetrics.DENSITY_LOW :
zoomDensity = WebSettings.ZoomDensity.CLOSE;
break;
case DisplayMetrics.DENSITY_MEDIUM:
zoomDensity = WebSettings.ZoomDensity.MEDIUM;
break;
case DisplayMetrics.DENSITY_HIGH:
zoomDensity = WebSettings.ZoomDensity.FAR;
break ;
}
webSettings.setDefaultZoom(zoomDensity);