css如何判断设备的dpr,谈谈设备像素比dpr

屏幕尺寸：指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米。常见的屏幕尺寸：

iphone4 3.5英寸

iphone5 4英寸

iphone6 4.7英寸

iphone6 plus 5.5英寸

iphoneX 5.8英寸

像素：显示屏的画面上表示出来的最小单位。每个像素的大小是不固定的，他是根据设备的分辨率决定的

分辨率：屏幕分辨率是指纵横向上的像素点数，单位是 px

物理像素(physical pixel)：控制显示的最小单位。买手机的时候会有一个 n x m 的分辨率，那是屏幕的n x m个呈像的点，一个点(小方格)为一个物理像素。它是屏幕能显示的最小粒度，常见屏幕分辨率：

iphone4 640*960

iphone5 640*1136

iphone6 750*1334

iphone6 plus1080*1920

iphoneX 1125*2436

像素密度(pixel per inch)：即dpi或ppi，屏幕每英寸所占的物理像素点。

PPI=像素数量/物理尺寸(英寸数)

像素数量指的是一个维度的，比如X轴的像素数量，或Y轴的像素数量，或者对角线的像素数量。而不是总的像素数量。

苹果区分手机屏幕是按照：非高清屏，高清屏(视网膜屏即retina屏)、超高清屏;常见屏幕ppi:

Iphone4 326ppi

Iphone5 326ppi

Iphone6 326ppi

Iphone6 plus 401ppi

Iphone X:424ppi

逻辑像素 | 设备独立像素(density-independent pixel)：简称dip或dp， 设备独立像素也称为密度无关像素，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)。

screen.width

CSS像素：就是CSS里的px，上面已经讲了是viewport中的一个小方格。CSS像素是Web编程的概念，独立于设备的用于逻辑上衡量像素的单位，也就是说我们在做网页时用到的CSS像素单位，是抽象的，而不是实际存在的。

设备像素比(device pixel ratio) ：设备像素比简称为dpr，其定义了物理像素和设备独立像素的对应关系。它的值可以按下面的公式计算得到：

window.devicePixelRatio = 设备像素比 ＝ 物理像素 / 设备独立像素

如：iPhone6的dpr为2，物理像素750(x轴),则它 的逻辑像素为375。 也就是说，1个逻辑像素，在x轴和y轴方向，需要2个物理像素来显示，即：dpr=2时，表示1个CSS像素由4个物理像素点组成。如下图：

常见设备dpr:

Iphone5： 2

Iphone6 ：2

Iphone6 plus ：3

Iphone X： 3

问题1：为什么以iPhone6为标准的设计稿的尺寸是以750px宽度来设计的呢？

iPhone6的满屏宽度是375px(Viewport’s device-width (in CSS pixels)：375px)，而iPhone6采用的视网膜屏的物理像素是满屏宽度的2倍，并且设计师所用的PS设计软件分辨率和像素关系是1:1。所以为了做出的清晰的页面，设计师一般给出750px的设计图，我们再根据需求对元素的尺寸设计和压缩。

问题2：1px 在高清屏上变粗了，为啥？

1px问题由于有retina屏的存在

设计稿一般做成满屏宽度的2倍

因此在dpr=2的retina屏下，会显示成2px

如果写成0.5px，在ios7和安卓，会把0.5px解读成0px

解决方案：

方案一：

设置线条为1px，然后通过transform:scale(x,y)来缩放线条为原来的一半，可显示0.5px的线条。