移动设备的屏幕问题

一、认识Retina屏

Retina屏	视网膜屏
开发公司	摩托罗拉
苹果第一款Retina屏	iPhone 4

如图所示，左侧为非Retina屏像素密度低，而Retina屏的像素密度高。

二、设备像素

设备像素：Device Pixel，简写为DP，也被称为“物理像素”（Physical Pixel）。

1、设备像素的组成

设备像素一般采用 水平分辨率 和 垂直分辨率 组成。
例如：iPhone 6 的设备像素为750 * 1334

2、设备像素的特点

• 出厂就设置好
• 是设备的固有属性
• 不会发生变化

三、设备尺寸

设备尺寸：Device Size，简写为DS。是设备对角线的长度，单位为英寸（inch），简称 “ 寸 ”。如下图：

四、苹果系列商品的参数

屏幕种类	设备	设备像素	尺寸
非视网膜屏	iPhone 3GS	320 * 480	3.5
视网膜高清屏	iPhone 4	640 * 960	3.5
视网膜高清屏	iPhone 5	640 * 1136	5
视网膜高清屏	iPhone 6/6s/7/8	750 * 1334	4.7
视网膜高清屏	iPhone 6+/6s+/7+/8+	1080 * 1920	5.5
超视网膜高清屏	iPhone X/XS	1125 * 2436	5.85
超视网膜高清屏	iPhone XR	828 * 1792	6.06
超视网膜高清屏	iPhone XS MAX	1242 * 2688	6.46

五、像素密度

像素密度：Pixel Density，简写为PD，单位尺寸的屏幕上所含有的设备像素个数。
单位：像素/英寸，Pixel Per Inch（PPI）

设备像素点有时候也被成为“点”（dot），因此在移动显示屏领域，像素密度也可以用点/英寸为单位，即Dots Per Inch，DPI。

1、计算公式

例：编写函数计算移动设备的像素密度

function getPixelDensity(pixelX,pixelY,deviceSize){
	return Math.sqrt(Math.pow(pixelX,2)+Math.pow(pixelY,2))/deviceSize;
}

六、设备独立像素

设备独立像素：Device Independent Pixel，简写为DIP，也被称为“ 逻辑像素 ”。

高分辨率对于移动设备来说是有副作用的！

如上图：iPhone 4 用4个物理像素表示一个设备独立像素（横向2个物理像素表示1个设备独立像素，纵向2个物理像素表示一个设备独立像素），这一切都是由操作系统控制的。

2、获取方式

移动设备的设备独立像素可以使用下列代码获得：

• 水平设备独立像素：screen.width
• 垂直设备独立像素：screen.height

3、css像素

css像素：编写移动端项目时所设置css属性取值被称为css像素。
在项目没有被缩放的情况下，css像素就是设备独立像素。

七、设备像素比

设备像素比：Device Pixel Ratio，简写为DPR，设备上设备像素和设备独立像素的比值。

1、计算

设备上设备像素和设备独立像素的比值。
例：iPhone 6 的物理像素是750 * 1334，设备独立像素是375 * 667，计算iPhone 6 的设备像素比。
DPR = 750/375 = 2

2、获取

设备的设备像素比可以采用下列代码获得：window.devicePixelRatio

3、作用

设备像素比是视网膜屏与非视网膜屏的一个识别区别：非视网膜屏的设备像素比为1，视网膜屏的设备像素比大于等于2。

设备型号	设备像素	系统分辨率	设备像素比
iPhone 3GS	320 * 480	320 * 480	1
iPhone 4	640 * 960	320 * 480	2
iPhone 4s	640 * 960	320 * 480	2
iPhone 5	640 * 1136	320 * 568	2
iPhone 5s	640 * 1136	320 * 568	2
iPhone 6/7/8	750 * 1134	375 * 667	2
iPhone 6+/7+/8+	1080 * 1920	414 * 736	2.6
iPhone X/XS	1125 * 2436	375 * 812	3
iPhone XR	828 * 1792	414 * 896	2
iPhone XS MAX	1242 * 2688	414 * 896	3
Galaxy S4	1080 * 1920	360 * 640	3