移动端web页面知识小结之像素密度、分辨率、屏幕尺寸

一直以来，本人对移动端分辨率、像素等概念傻傻分不清，特查阅多位牛人博客后总结如下要点，以便日后查看。

文档来源

http://weizhifeng.net/you-should-know-about-dpi.html

http://www.chinaz.com/manage/2015/0902/441624.shtml

/article/5062193.html

http://www.uisdc.com/mobile-ui-measurement-guideline

http://www.25xt.com/appdesign/8336.html

屏幕分辨率

是指屏幕上垂直方向和水平方向上的像素个数，单位是px。常见取值 480X800,320X480等

IPhone手机的屏幕分辨率如下图：



结论：

1、一个设备的分辨率是固定不变的————在同一个设备上，它的像素个数是固定的，这是厂商在出厂时就设置好的。

2、当浏览器页面缩放比为1时，屏幕分辨率 = CSS像素；

屏幕尺寸

是指屏幕对角线的长度，单位是英寸
1英寸（inch）=2.54厘米（cm）

DPI&PPI (屏幕像素密度)

DPI(dots per inch)为打印机每英寸可以喷的墨汁点数，用于印刷行业中度量空间点的密度
PPI(pixels per inch)为屏幕每英寸的像素数量(即在一个对角线长度为1英寸的正方形内所拥有的像素数)，用于度量计算机显示屏上像素的密度
目前PPI(主要是iOS)和DPI(比如在Android中)都会用在计算机显示设备的参数描述中，并且二者的意思是一样的，都是代表像素密度

这项指标是连接数字世界与物理世界的桥梁，像素密度越高，代表屏幕显示效果越精细。

屏幕的清晰程度其实是分辨率和尺寸大小共同决定，用ppi指数衡量屏幕清晰程度更加准确。同样像素大小的元素，在高PPI的屏幕上显示的比较小，在低PPI屏幕上比较大(如下图)

屏幕像素密度、分辨率、屏幕尺寸的关系

如分辨率为1920px*1080px，则1920px就是公式里的纵向，1080px就是公式里的横向了

附：电脑屏幕分辨率可调的原因

电脑系统推荐的是1366px*768px的分辨率，这意味着微软在这块屏幕上横向设置了768个像素，竖向设置了1366个像素。再怎么拉伸，这个数字是不会变了。如果把分辨率调成800*600，系统就会分配给你800*600个有效像素个数，也就是真实的色彩块。其他的个数呢，就由系统自作主张，通过一系列运算给你一个模拟色彩块，填充成正好1366*768个色彩块。这些拿来充数的像素块，和真实的像素块放到一起。就好比一个正规军，里面掺了很多杂牌军一样。

附：css中的1px并不等于设备的1px

像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。

在为桌面浏览器设计的网页中，css的1个像素往往都是对应着电脑屏幕的1个物理像素,所以我们无需对这个津津计较，但在移动设备上，必须弄明白这点。

在早先的移动设备中，屏幕像素密度(PPI)都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五花八门，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。

还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。