[WebView学习之二]:使用Web Apps 支持不同分辨率屏
Posted gavanwanggw
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[WebView学习之二]:使用Web Apps 支持不同分辨率屏相关的知识，希望对你有一定的参考价值。
上一篇我们学习了(1.[WebView学习之中的一个]:Web Apps简单介绍),今天我们来继续学习。
(博客地址:http://blog.csdn.net/developer_jiangqq),转载请注明。
Author:hmjiangqq
Email:[email protected]
由于android设备有非常多分辨率，不一样的屏幕以及像素密度。所以在Web页面的设计过程中，应该考虑网页总能显示合适的大小。
在你为Android设备开发Web页面是，我们须要考虑下面两个因素:
1.:视图窗口(The ViewPort)
The Viewport是一个能够进行缩放的矩形形状的Web页面。你能够设置多个ViewPort属性比如:尺寸大小以及初始化缩放比例。最重要的是the view port width(视图的宽度)，这个定义了整个Web页面的水平像素大小。
2:屏幕密度(The Screen Density)
在Android设备上面WebView控件和绝大多数Web浏览器一样都能够把CSS的像素值转换成以密度为基础的独立像素值。所以你的Web页面在中等密度屏幕(比如:160dpi)上面会呈现同样的大小。假设你的Web设计中图片是最重要的，那么你更加要关注不同分辨率密度的换算。由于300px宽度的会在320dpi屏幕上面会进行放大。
(一):指定窗体属性(Specifying Viewport Properties )
窗口是一个Web页面的区域，即时当我们进行缩放的时候可视窗口还是可以匹配屏幕的大小。比如:即时当我们的设备的物理宽度是480px(像素),viewport的宽度是800px(像素),当Viewport为正常缩放比例是(1.0)该基于800px设备的web页面也会全然充分的显示在屏幕上面。Android中绝大多数Web浏览器(比如:Chrome)的会默认设置一个大尺寸视图(该被称为"宽视图模式"-一般为980px)。非常多浏览器也尽可能的缩小，来默认显示完整的大小(该被称为:概要模式)
[注]:当使用WebView来显示页面时，该默认不启用宽视图模式(这样页面会充分的放大。不会适配屏幕)，当然你能够调用setUseWideViewPort()来启用宽视图模式
你能够在html文档的<head>中使用<metaname="viewport"…>标签为你的Web页面定义视图的属性，比如:宽度和初始化缩放比例。
以下是Viewport全部支持的属性以及能够设置的值
<span style="font-size:18px;"><meta name="viewport" content=" height = [pixel_value | "device-height"] , width = [pixel_value | "device-width"] , initial-scale = float_value , minimum-scale = float_value , maximum-scale = float_value , user-scalable = ["yes" | "no"] " /> </span>
比如:在以下<meta>标签中定义viewport宽度全然适配屏幕的宽度，而且设置用户不能进行缩放
<span style="font-size:18px;"><head> <title>Example</title> <meta name="viewport" content="width=device-width, user-scalable=no" /> </head> </span>
当为移动设备优化网页。通过我们应该设置width为"device-width"，这样尽可能的来适配全部的屏幕。然后使用CSS样式文件来为不同的屏幕分辨率调整布局。
[注]:当你确定你的Web页面来显示在小分辨率屏幕上面，你应该调用setUseWideViewPort(false)来禁用宽视图模式。
(二)针对不同屏幕使用CSS样式(Targeting Device Density with CSS)
Android浏览器以及WebView都支持CSS样式文件,这样你能够为特殊屏幕密度创建带有"-webkit-device-pixel-ratio"的CSS样式文件。这个属性的可取值为"0.75","1"或者"1.5",该分别代表低密度，中密度。以及高密度屏幕。
比如:你能够为每个密度创建单独的样式文件:
<span style="font-size:18px;"><link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" /> <link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" /> </span>
或者能够在一个样式文件里制定不同的风格
<span style="font-size:18px;">#header {
background:url(medium-density-image.png);
}
@media screen and (-webkit-device-pixel-ratio: 1.5) {
/* CSS for high-density screens */
#header {
background:url(high-density-image.png);
}
}
@media screen and (-webkit-device-pixel-ratio: 0.75) {
/* CSS for low-density screens */
#header {
background:url(low-density-image.png);
}
}
</span>很多其它处理不同屏幕分辨率。特殊资源图片的信息。你能够查看:High DPI Images forVariable Pixel Densities.
(三):针对不同的屏幕分辨率来使用javascript
Android浏览器和WebView都支持Dom属性，这样我们能够使用window.devicePixelRation该DOM属性来查询当前设备的密度。该属性的值代表当前设置的缩放比例因子。比如:假设window.devicePixelRatio的值为1.0，那么此时设备被觉得是中等密度屏幕而且默认不会进行缩放。假设该值为1.5，那么此时设备被觉得是高密度屏幕而且会进行1.5倍放大。
假设该值为0.75,那么此时设备被觉得是低密度屏幕而且会进行0.75缩小。当然Android浏览器和WebView的缩放比例都会基于现实Web页面的设备的密度，默认一般都会中等密度，可是你能够为不同屏幕密度来进行改变。
比如:以下就是使用Javascript来查询设备密度
<span style="font-size:18px;">if (window.devicePixelRatio == 1.5) {
alert("This is a high-density screen");
} else if (window.devicePixelRatio == 0.75) {
alert("This is a low-density screen");
}
</span>以上是关于[WebView学习之二]:使用Web Apps 支持不同分辨率屏的主要内容，如果未能解决你的问题，请参考以下文章