火焰傀偶的挣扎旅程

纯爷们的一生就是不停地燃烧,keep on burning soul!!
随笔 - 6, 文章 - 5, 评论 - 4, 引用 - 0
数据加载中……

关于android的webview屏幕适应

这是我2,3个月前遇到的问题,随手记一下。

主要是关于webview打开网页后的屏幕适应问题。

首先贴一段网上流传的代码:

 1 
 2
 3         //Support different screens     
 4         int screenDensity = mMyActivity.getResources().getDisplayMetrics().densityDpi;  
 5         switch (screenDensity){   
 6         case DisplayMetrics.DENSITY_LOW :  
 7             mWebView.getSettings().setDefaultZoom(ZoomDensity.CLOSE);  
 8             break;  
 9         case DisplayMetrics.DENSITY_MEDIUM:  
10             mWebView.getSettings().setDefaultZoom(ZoomDensity.MEDIUM);  
11             break;  
12         case DisplayMetrics.DENSITY_HIGH:  
13             mWebView.getSettings().setDefaultZoom(ZoomDensity.FAR);  
14             break ;
15         case DisplayMetrics.DENSITY_XHIGH:  
16             mWebView.getSettings().setDefaultZoom(ZoomDensity.FAR); 
17             break ;  
18         case DisplayMetrics.DENSITY_TV:  
19             mWebView.getSettings().setDefaultZoom(ZoomDensity.FAR);  
20             break ; 
21         }

这段代码的不靠谱之处在于:
1.明明case下有五种dpi,android库却只提供close,medium,far三个缩放因子(分别对应LOW,MEDIUM,HIGH,默认是MEDIUM),即便当dpi达到XHIGH(既320DPI)时,也只能设置far,显然是不正常的。

2.实际设备的实际dpi无法获取,因为无法得知设备的物理英寸,上面方法得到dpi值仅是个近似值。

如果单纯用上面的代码做屏幕缩放,对于一些机型肯定是不正常,并且无法估计长宽,比如一张1280宽的图片在实际dpi为X(X > 240 且 x < 320),分辨率为1280的设备上,有可能会被放大1.25倍,或是1.5倍。

如果想要得到正常的倍率,是需要配合网页端的。(这里仅讨论html5的场合,跨平台嘛)

个人认为,由网页方面写死一个宽,再提供一个js的缩放函数(包括图片,字体),根据不同设备的分辨率来调用,是比较理想的。(当然,也可以用穷举法,一个分辨率进一个网页,用不同css和不同大小资源 =_=!)

假设宽定位1280,则html5方面必须有:

1 <meta name="viewport" content="width=1280, initial-scale=1.0,maximum-scale=2.0, minimum-scale=0.5, user-scalable=no,target-densitydpi=device-dpi" />

其中,target-densitydpi
是最重要的,它将配合android端的以下代码使用。


1         //use html5 viewport attribute
2         settings.setLoadWithOverviewMode(true);
3         settings.setUseWideViewPort(true);


表示我们的代码支持html5网页自适应。所谓杀什么畜生用什么刀,网页的事情,dpi适应什么的,就交给html5去做好了 = =,不用我们在更外面一层蛋疼。

这样做之后,1280宽的图片无论在什么设备的分辨率都是正常的尺寸,不会被做倍数不明的拉伸,方便我们控制。


posted on 2013-06-25 17:30 WhiteDummy 阅读(5497) 评论(2)  编辑 收藏 引用 所属分类: android

评论

# re: 关于android的webview屏幕适应[未登录]  回复  更多评论   

帮了大忙,感谢
2015-03-30 18:14 | li

# re: 关于android的webview屏幕适应  回复  更多评论   

不错 谢谢
2016-04-01 11:49 | 春暖花开

只有注册用户登录后才能发表评论。
网站导航: 博客园   IT新闻   BlogJava   博问   Chat2DB   管理