Tips
iPhone屏幕
屏幕尺寸
指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米
iPhone 4/4S
iPhone 5/5C/5S/SE
iPhone 6/6S
iPhone 6S Plus
iPhone 7
iPhone 7 Plus
iPhone 8
iPhone 8 Plus
iPhone X
3.5英寸
4英寸
4.7英寸
5.5英寸
4.7英寸
5.5英寸
4.7英寸
5.5英寸
5.8英寸
屏幕分辨率
指在横纵向上的像素点数，单位是px，1px=1个像素点。一般以纵向像素*横向像素来表示一个手机的分辨率，如1960*1080（这里的1像素指的是物理设备的1个像素点）
机型
分辨率
机型
分辨率
机型
分辨率
iPhone 4/4S
960*640
iPhone 6S Plus
1920*1080
iPhone 8 Plus
1920*1080
iPhone 5/5S
1136*640
iPhone 7
1334*750
iPhone X
2436*1125
iPhone SE
1136*640
iPhone 7 Plus
1920*1080
iPhone 6/6S
1334*750
iPhone 8
1334*750
屏幕像素密度
屏幕上每英寸可以显示的像素点的数量，单位是ppi，即pixels per inch的缩写。屏幕像素密度与屏幕尺寸和屏幕分辨率有关，在单一变化条件下，屏幕尺寸越小、分辨率越高，像素密度越大，反之越小
屏幕上勾股定理算出对角线的分辨率：√(1920²+1080²)≈2203px
对角线分辨率除以屏幕尺寸：2203/5≈440dpi
1920^2 + 1080^2 ≈ 2203^2 //3686400 + 1166400 = 4852800
2203 / 5 ≈ 440
PPI与DPI
PPI（Pixel Per Inch by diagonal）：表示沿着对角线，每英寸所拥有的像素（Pixel）数目
PPI数值越高，代表显示屏能够以越高的密度显示图像，即通常所说的分辨率越高、颗粒感越弱
ppi与dpi
描述
ppi
pixels per inch，屏幕上每英寸可以显示的像素点的数量，即屏幕像素密度
dpi
dots per inch，最初用于衡量打印物上每英寸的点数密度，就是打印机可以在一英寸内打多少个点。当dpi的概念用在计算机屏幕上时，就称之为ppi。ppi和dpi是同一个概念，Android比较喜欢使用dpi，IOS比较喜欢使用ppi
不同的设备对1px有不一样的定义
在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。
在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是devicePixelRatio = 物理像素 / 独立像素。css中的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该设备上一个css像素代表多少个物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素相当于2个物理像素
其实就是移动端和PC端的px是不同的，移动端的屏幕可视区域(viewport)小但像素多，所以跟PC相比的每个独立像素点的物理像素是多的，也就是移动端物理像素更密集，所以更PC的独立像素有dp的倍数转换
在进行具体的分析之前，首先得知道下面这些关键性基本概念(术语)。
物理像素(physical pixel)
一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。
设备独立像素(density-independent pixel)
设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，然后由相关系统转换为物理像素。
所以说，物理像素和设备独立像素之间存在着一定的对应关系，这就是接下来要说的设备像素比。
设备像素比(device pixel ratio )
设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系，它的值可以按如下的公式的得到：
设备像素比 = 物理像素 / 设备独立像素 // 在某一方向上，x方向或者y方向
还可以通过window.devicePixelRatio获取到当前设备的dpr
window.devicePixelRatio
机型
iPhone 3G/3GS
iPhone 4/4S
iPhone 5/5C/5S/SE
iPhone 6/6S
iPhone 6S Plus
iPhone 7
iPhone 7 Plus
iPhone 8
iPhone 8 Plus
iPhone X
屏幕尺寸
3.5英寸
3.5英寸
4英寸
4.7英寸
5.5英寸
4.7英寸
5.5英寸
4.7英寸
5.5英寸
5.8英寸
独立像素(CSS像素)
480*320
480*320
568*320
667*375
736*414
667*375
736*414
667*375
736*414
812*375
物理像素(分辨率)
480*320
960*640
1136*640
1334*750
1920*1080(2208x1242)
1334*750
1920*1080
1334*750
1920*1080
2436*1125
ppi/dpi(像素密度)
163
326
326
326
401
326
401
326
401
458
dpr(倍图)
1
2
2
2
3(2.5)
3
3
3
3
3(2.9)
如果APP要同时兼容iPhone3GS~iPhone6+，则需要提供icon.png/icon@2x.png/icon@3x.png三种分辨率的图片
在Android中，规定以160dpi为基准，1dp=1px。如果密度是320dpi，则1dp=2px，以此类推
2K分辨率指的是屏幕分辨率达到了一种级别,指屏幕横向像素达到2000以上（iPhone X是2K屏）
This site is open source. Improve this page.