Tips

iPhone屏幕

屏幕尺寸

image

指屏幕的对角线的长度,单位是英寸,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    

屏幕像素密度

image

屏幕上每英寸可以显示的像素点的数量,单位是ppi,即pixels per inch的缩写。屏幕像素密度与屏幕尺寸和屏幕分辨率有关,在单一变化条件下,屏幕尺寸越小、分辨率越高,像素密度越大,反之越小

image

1920^2 + 1080^2  2203^2  //3686400 + 1166400 = 4852800
2203 / 5  440

PPI与DPI

image

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屏)