我们在平时经常会听到手机分辨率是多少乘多少像素，在css里也会用到譬如{width: 60px;}。那么这里的像素是不是同一种像素呢？如果不是，那又分别指的是什么像素呢。
#三种像素
准确的讲像素其实分为三种
- Css Pixels
- Device Pixels
- Density-Independent-Pixels
###Css Pixels
css 像素就是平时我们在css样式里写的比如{width: 60px;}。这里的60px便是60css像素。css像素是浏览器厂商为web开发者提供的一层抽象的像素层。css像素的尺寸是可以缩放的。
比如这个网页，黄色的侧边栏宽度是190像素。
layout viewport 就是css布局中使用的，width: 10% 说的就是 layout viewport的 10%。
visual viewport 就是用户实际能看到的视图大小，也就是用户在手机屏幕上能看到的大小。
给出图示
你将一个桌面的网页放到手机上看，手机上屏幕只能显示部分网页，这个部分网页就是visual viewport，而这个网页实际的css布局大小就是 layout viewport。
大多数浏览器设置了layout viewport = visual viewport。
这样大多数网页在手机上看的时候，是这样的。
这时候你可能为了要看清，就需要放大浏览器。当你每次缩放手机浏览器时，只会改变visual viewport，而layout viewport。为什么？试想一下，如果你每次缩放都要改变layout viewport的话，那么整张网页的css 布局都需要重新计算，这实在太浪费cpu和电池了。
显然每次都需要缩放屏幕不利于用户在手机上浏览。为了解决这个问题，Apple提出了 viewport meta 标签，通过这个告知浏览器应该设置layout viewport多大。常用的是 ，这里的device-width就是设备宽度，也就是我们之前的提到的device-independent-pixels。
还记得我们之前讨论为什么提出了device-independent-pixels这个概念吗？就是因为手机的物理分辨率越来越大，如果我们不采用device-independent-pixels 而是device-pixels就会出现各种问题，iPhone1(320px设备像素)的 layout viewport是320px，iPhone4(640px设备像素)的layout viewport变成了640px。为了解决这问题，才提了device independent pixels概念，进而在 viewport meta标签采用了。
#ReadMore
A tale of two viewports
