像素和viewport的理解

物理像素、css像素

物理像素：屏幕中，实际上用来显示图像的像素，客观存在的。

css像素：浏览器使用的抽象单位， 主要用来在网页上绘制内容。

现在的手机屏幕有各种不同的分辨率，例如iphone5（1136x640）、iphone6（1344x750）、Samsung Galaxy S4（1920x1080）。物理像素值相同的元素在各个屏幕上的显示就会有很大的差异。

下图是宽高尺寸相同、分辨率为2X2和4X4的屏幕。绿色为物理像素分布，红色矩形为1物理像素的元素。可以发现在低分辨率下，红色矩形面积比较大。

      

如果css像素和物理像素等价，即1css像素=1物理像素，则<div style="width=1px;height=1px"><div>的显示情况会如上图，这样是不可取的。为了解决这种问题，设备独立像素产生了。

设备独立像素

各种屏幕中，它的宽或高包含某种像素的数目都相等。则绘制页面内容时，以这种像素为基础单位，各种屏幕的显示效果是不是都一致了。

这种神奇的像素就是设备独立像素，是抽象的，实际上不存在。

 

              ，         

前两图：分辨率为2X2的屏幕的物理像素和设备独立像素分布。后两图：分辨率为4X4的屏幕的物理像素和设备独立像素分布。绿色为物理像素，橙色为设备独立像素。

两个屏幕的宽或高，拥有相等独立像素数目的前提下，即使物理像素数目不同，1x1独立像素表示的面积是一样的。

可知物理像素和设备独立像素的关系：物理像素=设备独立像素x设备像素比   或     设备像素比=物理像素/设备独立像素

手机类型	分辨率	物理像素	设备像素比	设备独立像素
例1	2x2	2x2	1	2x2
例2	4x4	4x4	2	2x2

 

 

 

 

 

一般情况下，设备独立像素是针对屏幕的宽来说的。目前大部分手机屏幕宽的独立像素数目为320左右。

手机类型	分辨率	宽的物理像素	宽的设备像素比	宽的设备独立像素值
iphone5	1136x640	640	2	320
iphone6	1344x750	750	2	375
iphone4	960x640	640	2	320

 

 

 

 

 

 

1单位设备独立像素在各屏幕显示效果够差不多，因为各屏幕(大部分手机)的宽都是320的独立像素。

那是不是1css像素等于1独立像素呢？这样，<div style="width=1px;height=1px"><div>就能适应各种分辨率了。

其实不是！！设备独立像素数目=css像素数目x页面缩放比例。

页面缩放比例都为100%时，可知1css像素等于1独立像素，即1px=1dip。用户对页面进行缩放时，页面缩放比例在变化，单位css像素表示的独立像素的数目也在变化。

缩放比例是怎么计算和产生的呢，这样不得不提viewport了。

viewport

viewport是虚拟窗口，用于放置页面。viewport可以比屏幕的可见区域大。

 

在html页面中添加元信息可以设置viewport的初始大小，大小的单位为独立像素。例如：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

该meta标签的作用是让当前viewport的宽度等于设备的宽度（也可以填数值），同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求。如果不对viewport进行设置，就会给予一个默认值，一般是980，但是不一定。

页面缩放时就是在调整viewport的区域大小，页面缩放比例=调整前区域大小/调整后区域大小。区域里面的页面内容也会跟着缩放，这时每单位css像素对应的设备独立像素数目也在变化。

总结

物理像素数目=设备独立像素数目x设备像素比

　　　　　　=(css像素数目x页面缩放比例)x设备像素比

　　　　　　=(css像素数目x(viewport调整前区域/调整后区域))x设备像素比