小程序webview 页面被放大_WebView显示的网页在大分辨率屏下被放大--解决方案

Posted 未暖咖啡

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小程序webview 页面被放大_WebView显示的网页在大分辨率屏下被放大--解决方案相关的知识,希望对你有一定的参考价值。

例如适合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);

以上是关于小程序webview 页面被放大_WebView显示的网页在大分辨率屏下被放大--解决方案的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序webview内页面分享

webview 嵌入 h5 页面互相通信

小程序webview使用避坑(因为开发者配置域名错误导致打开失败)

解决小程序中webview页面多层history返回问题

微信小程序嵌套webview页面条件控制是不是返回小程序

小程序左上角webview关闭