一直以来，本人对移动端分辨率、像素的概念傻傻分不清，特总结下文，以便日后查看。

一 屏幕分辨率

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

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

二 逻辑分辨率(像素)和物理分辨率(像素)

IPhone手机逻辑像素与物理像素的对应关系如下图：

物理像素

PX：CSS pixels 物理像素

逻辑像素

dp/pt/dip:device independent pixels 设备无关像素(逻辑像素),浏览器使用的抽象单位，只要两个屏幕逻辑像素相同，它们的显示效果就是相同的

设备像素缩放比

dpr: device pixel ratio 设备像素缩放比

物理像素与逻辑像素的关系

pt = dp = dip = px/dpr

(即：逻辑像素 = 物理像素 / dpr)

其中，dpr = ppi/160

计算实例如下：

iphone5的设备分辨率(物理像素)：640px*1136px

iphone5的逻辑像素:320pt*568pt

iphone5的dpr = 2 //一个逻辑像素的长度等于2个物理像素

iphone5的逻辑宽度：320pt = 640px/2

iphone5的逻辑高度：568pt = 1136px/2

Android系统定义的四种像素密度

Android系统定义的四种像素密度

像素密度

ldpi

mdpi

hdpi

xhdpi

ppi

>=120

>=160

>=240

>=320

dpr

0.75

1.0

1.5

2.0

三 像素密度

DPI：打印机每英寸可以喷的墨汁点，常用于印刷行业

PPI(pixels per inch)：又称为像素密度，每英寸的长度上排列的像素点数量。这项指标是连接数字世界与物理世界的桥梁。

目前，在计算机显示设备参数描述上，这二者意思表达的是一样的。

像素密度越高，代表屏幕显示效果越精细。

PPI越高，代表屏幕能以越高的密度显示图像，即像素数越高，图像越清晰(即通常所说的分辨率越高，图像越清晰)，但同时图片会越小，因系统默认设置缩放比(dpr)越大

如设置电脑屏幕分辨率越大，图像越清晰，但桌面上的图标越小，就是因为系统默认设置缩放比越大了

PPI计算公式：

ppi = √(设备物理像素长px^2+设备物理像素高px^2)/设备屏的对角线英寸数(英寸)

计算实例如下：

iphone5的PPI = (1136px^2+640px^2)开方 /4英寸的屏 = 326ppi(根据上表，326ppi属于xhdpi屏，所以dpr等于2————dpr大于等于2的都是Retina屏)

Retina屏(高清屏)：dpr都是大于等于2

Retina屏比普通屏清晰很多，就是因为它的像素密度翻了一倍。

四 设计页面

在设计和开发过程中，应该尽量使用逻辑像素尺寸来思考界面

iPhone

目前最多的是iPhone5/5s的屏幕。倍率为2，逻辑像素320×568。上升势头最猛，未来有望登上第一的是iPhone 6的屏幕。倍率为2，逻辑像素375×667。

按照这两种尺寸来设计，都是比较主流的做法。可以兼顾短一些的iPhone 4s，大一点的6 plus也不会过于空旷。

不过在切图的时候要注意，由于iPhone 6 plus的3倍图是由2倍图放大而来，所以位图要注意保证清晰。

Android

如今的Android屏幕逻辑像素已经趋于统一了：360×640

手机端Web网页

手机端网页比较流行的做法是按照iPhone 5的尺寸来设计。倍率2，逻辑像素320×568。

这样的做法比较实在，倍率2的屏幕无论在iOS还是Android方面都是主流，而且又是2倍屏幕中逻辑像素最小的。所以图片的尺寸可以保持在较小的水平，页面加载速度快。当然，缺点就是在倍率3的设备上看，图片不是特别清晰。

如果追求图片质量，愿意牺牲加载速度，那么可以按照最大的屏幕来设计。也就是iPhone 6 plus的尺寸，倍率3，逻辑像素414×736。

五 总结

真正决定显示效果的，是逻辑像素尺寸。为此，iOS和Android平台都定义了各自的逻辑像素单位。

iOS的尺寸单位为pt，Android的尺寸单位为dp。但两者其实是相等的。

如果我们设计的时候用单位px，可以说是物理分辨率尺寸。

如果我们设计的时候用单位pt，可以说是逻辑分辨率尺寸

Android的最小点击区域尺寸是48x48dp

设计移动版web页面时，手机端网页比较流行的做法是按照iPhone 5的尺寸来设计。倍率2，逻辑像素320×568, 即设计的页面大小为：640px × 1136px

六 参考来源：