一、基本概念
(1) CSS pixels与device pixels
CSS pixels: 浏览器使用的抽象单位, 主要用来在网页上绘制内容。
device pixels: 显示屏幕的的最小物理单位,每个dp包含自己的颜色、亮度。
等值的 CSS pixels在手机屏幕上占多大的位置,这不是固定的,这取决于很多属性。经过分析和总结,我们可以得出这么一条公式: 1 CSS pixels = (devicePixelRatio)^2 device pixels (^2是平方的意思,至于 devicePixelRatio是缩放比例。解释:比如一手机device-width:320px,width:640px;说明devicePixelRatio=2,手机以宽度320px能够显示640px的网页无滚动条,说明该手机压缩了网页,因而更清晰。)
(2) viewport的使用
常用属性如下:
<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] ,
device-pixel-ratio=float_value,
target- densitydpi = [ dpi_value | device-dpi| high-dpi | medium-dpi | low-dpi] " />
在这些属性里面,我们重点关注target-densitydpi,这个属性可以改变设备的默认缩放。medium-dpi是target-densitydpi的默认值,按照 设备的devicePixelRatio放大网页。如果我们显式定义target-densitydpi=device-dpi,那么设备就会按照真实的dpi来渲染页面。打个比方说,一张320*480的图片,放在iphone4里面,默认是占满屏幕的,但如果定义了target-densitydpi=device-dpi,那么图片只占屏幕的四分之一(二分之一的平方),因为iphone4的分辨率是640*960。
(3) PPI/DPI
PPI,有时也叫DPI,所表示的是每英寸所拥有的像素(pixel)数目,数值越高,即代表显示屏能够以越高的密度显示图像。(注:这里的像素,指的是device pixels。)搞清楚了PPI是什么意思,我们就能很容易理解PPI的计算方式了,我们需要首先算出手机屏幕的对角线等效像素,然后处以对角线(我们平常所说的手机屏幕尺寸就是说的手机屏幕对角线的长度),就可以得到PPI了。准确的计算公示大家可以参照下图。比较有意思的是,根据公式计算出来的iPhone 4的PPI为330,要比苹果官方公布的326要高一点点。
同理,以HTC G7为例,480*800的分辨率,3.7英寸,算出来就是252的PPI。
国内常见的手机:
由上图可知,PPI在120-160之间的手机被归为低密度手机,160-240被归为中密度,240-320被归为高密度,320以上被归为超高密度(Apple给了它一个上流的名字——retina)。
这些密度对应着一个特定的缩放比例值,拿我们最熟悉的iphone4或4s来说,它们的PPI是326,属于超高密度的手机。当我们书写一个宽度为320px的页面放到iphone中显示,你会发现,它竟然是满宽的。这是因为,页面被默认放大了两倍,也就是640px,而iphone4或4s的宽,正是640px。
图中把高密度的一类圈起来,是因为这是android手机的统计数据,在国内安卓手机市场中,高密度的设备占了绝大多数的市场份额,这是很重要的一点,也是我们做安卓端webapp要注意的关键点。
(4)总结:实际只需知道,target-densitydpi的含义就知道如何控制了。如果值为默认的medium-dpi,那么1px css网页被按照设备缩放比例device-pixel-ratio放大;设置为device-dpi将不缩放,所以这种情况下,iPhone手机设计要弄2px css。