Android dp 和 CSS px

前情提要：设计师给的设计稿是1242分辨率的（iPhone6p），标注的字体大小是54px，前端工程师写的H5页面是18px，效果正常且能自适应iPhone6。来调查一下 为什么是标注数值除以3？为什么自动适应iPhone6？css里的px和Android的dp有怎样的关系？

在进行具体的分析之前，首先得知道下面这些关键性基本概念(术语)。

物理像素(physical pixel)

一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。

设备独立像素(density-independent pixel)

设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，然后由相关系统转换为物理像素。

所以说，物理像素和设备独立像素之间存在着一定的对应关系，这就是接下来要说的设备像素比。

设备像素比(device pixel ratio)

设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系，它的值可以按如下的公式的得到：

设备像素比 = 物理像素 / 设备独立像素 // 在某一方向上，x方向或者y方向

在javascript中，可以通过window.devicePixelRatio获取到当前设备的dpr。

在css中，可以通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询，对不同dpr的设备，做一些样式适配(这里只针对webkit内核的浏览器和webview)。

---

iPhone6的物理像素是750 x 1334，设备像素比(devicePixelRatio)是2，设备独立像素是375 x 667 (750/2 x 1334/2)

iPhone6p的物理像素是1080 x 1920，但logic pixel是1242 x 2208， 设备像素比(devicePixelRatio)是3，设备独立像素是414 x 736 (1242/3 x 2208/3)

css里面有物理像素和逻辑像素的概念，在这里，逻辑像素可以理解为设备独立像素

其实，logic point更适合翻译成逻辑点。无论是逻辑像素还是逻辑点，只需要理解一个逻辑点(逻辑像素)需要一个或一个以上的物理像素来展示就可以了。

那么，为什么iPhone6p是这样奇葩的逻辑点呢？

• 如果逻辑点分辨率用 360x640， 360x640@3x 正好是 1080x1920。但是逻辑pt分辨率 360x640 就会比 iPhone 6的 375x667 还低，也就是说相同字号的情况下，iPhone 6如果一行显示了25个字，而 iPhone 6 Plus按这个逻辑pt方案，一行就会只能显示24 个字了。
• 如果逻辑点分辨率用 540x960，540x960@2x 正好是 1080x1920。但是iOS UI 元素尺寸在屏幕上的实际物理面积一下子就变小了，比如标签栏或导航栏按钮的物理高度只有原来的 81.5% ，点击面积就只有iPhone 6 的0.815*0.815=66.4%，用户点击就困难了。
• 如果物理分辨率做到1242x2208就减少了一个从1242压缩到1080的过程，但是1242的物理分辨率是在1080p和2k屏之前的尺寸，功耗和成本都会提升，而且这样非1440的2k分辨率的屏幕采购也是问题。

至于为什么一定是 414x736，有人估计应该是在 5.5inch 和 ppi=461 这两个前提限定的情况下，按这个 414x736 pt 分辨率，屏幕上 UI 元素操作物理大小最接近 iPhone 6上的表现。

---

Android世界中更加复杂，这里列举了几款手机的基本数据

	Nexus 4	Nexus 6	Nexus 6p	LG L24	Mi 4c
物理像素	768 x 1280	1440 x 2560	1440 x 2560	1440 x 2560	1080 x 1920
设备像素比(dpr)	2	3.5	3.3	4	3
设备独立像素(dip/dp)	384 x 640	412 x 732	435 x 773	360 x 640	360 x 640

Android提供了获取density的方法：

float density = context.getResources().getDisplayMetrics().density;

density的官方定义是The logical density of the display，翻译过来是屏幕的逻辑密度，其实就是之前提到的设备像素比(dpr)。

---

在浏览器中，获取设备像素比就比较简单：

window.devicePixelRatio

比如，我写了一个网页，用手机浏览器打开：

show devicePixelRatio

结果显示与Android的density的结果是一致的。

注：
By specifying width=”device-width”, you are asking the browser to apply a scaling factor to its screen pixels. One css pixel occupies one or more screen pixels. How many more? This value is called the css pixel ratio.

---

回顾一下

同一台设备，它的设备像素比(dpr)是确定的，无论通过Android api 获取还是浏览器 js/css 获取。
The css px is actually Device Independent Pixel(dip), and it is a common pattern to use px as dp in css.
css中的px具有与Android中的dp等同的效果

参考：
【原创】移动端高清、多屏适配方案
iPhone 6 Plus的逻辑分辨率为什么是414x736？
设备像素比devicePixelRatio简单介绍