高清屏概念解析与检测设备像素比的方法

前言

做移动端h5开发很久了，从开始入行到现在。很多知识和工具都是在用前辈留下的遗产，都没有深入的研究过原因，了解为什么要这么去做。

也许自己也是过了交给自己做什么就做什么的阶段了。在国庆节有一个大块的时间，把最近看到的知识总结一下，也算是对这方面的知识划上一个句号。想想着实把国庆节过成了劳动节，没办法，自己就是这样的一个人，“应该去做的，而且有能力做的，如果不去做，心里面总是不舒服”。

这篇文章的内容主要分为两个部分：

1. 高清屏（Retina）相关概念解析和高清屏（Retina）与前端开发的关系；
2. 前端开发过程中使用什么手段区分高清屏和普通屏幕，并且衍生出的适配方案；

注：本篇文章的所有图片来源于网络，如有侵权请告知。

高清屏（Retina）概念解析和前端开发的关系

1. 高清屏概念解析

高清屏（Retina）概念的兴起主要是从乔帮主发布 Retina 设备开始兴起。主要功能如下：

具备足够高的物理像素密度而使人体肉眼无法分辨其中单独像素点的液晶屏。

特点如下：
1. 一种具备超高像素密度的液晶屏；
2. 同样大小屏幕上显示的像素点由一个变为多个；

看一张乔帮主当年发布 高清屏（Retina）时的一张照片：

由乔帮主背后的那两张图可以发现，高清屏和普通平的主要区别：高清屏（Retina）和普通屏相比，相同区域的物理像素点数，高清屏是普通屏的4倍。

2.物理像素点和css的关系

先来看一张图：

由上面的图我们可以知道，当我们使用css设置了一个区域以后，高清屏含有的像素点数是普通屏的4倍。而css设置的像素值（px）属于普通像素点，或者是标准像素点。

那么我们平时在普通屏幕中正常显示的位图图像放在高清的屏幕上会有什么问题呢？由上面的知识可以知道，普通屏幕的1个CSS像素点对应4个高清屏幕的像素点，1个分成4个，不够分的情况下，颜色会取近似值。所以在高清屏上，在普通屏幕正常显示的图片会变的模糊。

可以看下图来加深理解：

这就是为什么我们现在的设计稿为什么都会设计成2倍稿的原因。为了兼容高清屏幕的图片高清晰显示，我们的裁切图是2倍图，在css中使用的时候会使用css压缩2倍。

比如，我们有一个icon.png的文件，切图大小是 200x200 。而我们使