虽然设备像素,设备独立像素,CSS 像素这三个东西好像跟平时写 CSS 没有什么直接的联系,但是如果要理解诸如 viewport , srcset , size 这些东西,还是需要了解一下的.
一 简略版
设备像素:平时所说的分辨率,比如 iphone6s 的分辨率是 1334*750
设备独立像素:一台设备上程序用来描绘数据的一个个的 "点",也就是虚拟的像素.以前设备像素对应一个设备独立像素,后来出现了高分辨率的手机,不可能再一个设备像素对应一个设备独立像素了,因为这样东西会被缩小,看不清.(想象一下两台尺寸相同的手机,A 的分辨率是 B 的三倍,那么同一张图片在 A 上的面积 = B 上的面积 / 9.)
所以一般高像素设备都是多个设备像素显示一个设备独立像素.
可以在浏览器控制台输出 screen.width/height 查看设备独立像素.
设备像素比(DPR):设备像素 / 设备独立像素,(手机宽设备像素 / 手机宽设备独立像素)设备像素比越高渲染越精致.
比如,iphone6s 的分辨率是 1334*750,设备独立像素是 375 * 667,那么它的设备像素比就是 750 / 375 = 2
可以在浏览器控制台输出
window.devicePixelRatio
查看设备像素比.
CSS 像素:写 CSS 的时候我们所用的像素 px.应该说在 PC 端 CSS 像素就是设备独立像素,但移动端就不一定了.
Viewport:浏览器放内容的区域,一般移动设备都是 980px.浏览器会根据 viewport 布局然后缩放到屏幕大小.这里的像素指的就是 css 像素了.
可以在浏览器控制台输出 window.innerWidth 查看 Viewport 大小.
屏幕尺寸:屏幕对角线的长度,以英尺为单位.
像素密度(PPI):每英寸屏幕拥有的像素数.
二 详细版
1. 设备像素(device pixel)
也是物理像素,设备能控制显示的最小单位.可以看成屏幕上的一个个无法再拆分的点.
假设一个设备像素比是 1 的移动端用户对网页进行缩放,网页中有一个 300px 的 div,放大的时候这个 div 会不断变大,但是它的 CSS 像素是不变的(还是 300px,CSS 像素点放大了),它的设备独立像素和设备像素变大了(CSS 像素不一定等于设备独立像素!一台设备的设备像素比始终不变)(比如,放大两倍,那么这个 div 的设备像素就变成 600px 了).
看下图(浅色图层是 CSS 像素,深色图层为物理像素):
原始:没有进行缩放的时候,CSS 像素:物理像素 = 1:1
图 1-CSS 像素:物理像素 = 1:1
缩小: CSS 像素:物理像素 < 1:1
图 2-CSS 像素:物理像素 < 1:1
放大:CSS 像素:物理像素 > 1:1
图 3-CSS 像素:物理像素 > 1:1
2. 设备独立像素(device-independent pixel,DIP)
可以认为是计算机坐标系统中的一个点,这个点是给程序控制和使用的,是虚拟的.现在的高分辨率屏幕会用多个设备像素来显示一个设备独立像素.
一台设备上的设备独立像素和设备像素一样,都是固定的.
设备中有相关系统把设备独立像素或者 CSS 像素转化为物理像素.
ios 设备上用 screen.width 和 screen.height 得到设备独立像素.也就是视网膜屏的 ipad 和非视网膜的 ipad 返回值是一样的.
android 设备上貌似返回的是物理像素.
用 screen.width 和 screen.height 查看设备独立像素.
3. 设备像素比(DPR)
物理像素 / 设备独立像素,也就是一个虚拟像素对应多少个物理像素.(横坐标轴上或纵坐标轴上)
所以设备像素比越高,内容的渲染会更加精致.
比如,某一台手机分辨率(设备像素)是 480*800,纵向手持的宽度(设备独立像素)是 320px,那么设备像素比就是 480/320=1.5.
4. viewport 和 <meta name="viewport"content="width=device-width, initial-scale=1">
用
innerWidth/innerHeight
可以查看页面的 viewport.
viewport 是一块区域,浏览器根据这个区域来计算宽度是百分比的元素的宽度.描绘图案.
一般来说 PC 端端 viewport 跟浏览器的大小是一致的,移动端的 viewport 宽度大多都是 980px,可见移动端的 viewport 比真实的移动端屏幕大多了.
图 4 - 移动端的 viewport
在 Chrome 浏览器上设置一个模拟器,宽度(设备独立像素)360px,这时候在控制台分别打印出 innerWidth 和 outerWidth,截图如下:
移动端 viewport 比其设备独立像素宽度大许多
怎么让我们看到整个页面呢?浏览器渲染完页面后,会按比例缩小,直到我们在屏幕上可以看到整个页面:
在 viewport 上渲染页面之后按比例缩小
可以看到,字体变得超级超级小.
这时候,在这个屏幕上,CSS 像素是 980px,设备独立像素是 360px.也就是说现在一个设备独立像素点对应差不多 3 个 CSS 像素点!
那怎么让一个设备独立像素点对应一个 CSS 像素点呢,我们不想要让字变得太小啊!
<meta name="viewport" content="width=device-width, initial-scale=1">
就是用来解决这个问题的.
width=device-width 把 viewport 宽度设置称为设备的设备独立像素宽度了.这时候一个 CSS 像素点就对应一个设备独立像素点了!看一下效果:
width=device-width
这时候控制台打印 innerWidth 和 outerWidth,会发现,他们已经一样大了:
width=device-width
再说一下 initial-scale=1,这个表达式表示页面的原始缩放比例为 1.如果为 2,那么页面中元素会放大一倍.但是 viewport 大小不变.
来源: http://www.jianshu.com/p/99afcb3893ca