首先需要理解一些屏幕分辨率相关的概念:

屏幕分辨率与PPI

屏幕分辨率（Screen Resolution）

屏幕上面的像素点数，以 水平像素数 * 垂直像素数 来表示，分辨率越高，像素数越多，图像越细腻。分辨率的单位为px（像素），例如 1920 * 1080 分辨率，指的是水平像素为 1920 像素，垂直像素为 1080 像素。

DPI（每英寸点数 Dots Per Inch）

DPI（Dots Per Inch，每英寸点数）是一个量度单位，用于点阵数码影像，指每一英寸长度中，取样、可显示或输出点的数目。

PPI（每英寸像素数 Pixels Per Inch）

PPI（Pixels Per Inch，每英寸像素数）所表示的是每英寸对角线上所拥有的像素数目。假设 X 代表长度像素数；Y 代表宽度像素数；Z 代表屏幕大小（屏幕对角线长度单位是英寸），那么 PPI=√（X^2+Y^2）/ Z。PPI 越高，人视觉上看到的屏幕就越清晰。当屏幕的 PPI 达到一定数值时，人眼就几乎分辨不出颗粒感了。

常见屏幕比例与分辨率

16：9屏幕比例

16：9的屏幕比例，常见的分辨率有 1920 * 1080（Full HD全高清）、1280 * 720（高清）、2560 * 1440（四高清晰度，超清）、1366 * 768（WXGA）分辨率。

1920 * 1080（1080P）主要应用于电脑PC显示屏、笔记本高清屏和一些电视显示设备。

1280 * 720 和 1366 * 768 主要应用在一些小屏幕商务笔记本（例14寸）、超级本、高清播放器等显示设备。

2560 * 1440 分辨率为超高清显示分辨率，与 2048 * 1080、2048 * 1536(QXGA)等分辨率，常被称为2K分辨率。经常在一些大屏显示器、设计用显示器、高清电视中可以见到。

16：10屏幕比例

也就是宽荧幕比例。常见的分辨率有 1280 * 800（WXGA）、1440 * 900（WXGA+）、1920 * 1200（WUXGA）等分辨率，被应用于宽荧幕笔记本电脑显示屏、宽屏电视、宽屏显示器等设备。

4：3屏幕比例

4：3屏时代较为久远，在未出现宽荧幕前，4：3屏为最为常见的显示比例。常见的分辨率有640x480（VGA）、800x600（SVGA）、1024x768（XGA）等分辨率。尤其在一些CRT显示器、比较老的4：3方屏LCD显示器、比较老的电视上面，这种分辨率比较常见。尤其在15寸CRT显示器，比较通用的 800 * 600 ，17寸显示器最为通用的，则为 1024 * 768，如果屏幕分辨率再高，字体显示会特别小。

Retina屏幕

所谓 “Retina” 是一种显示标准，是把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。该技术最初由摩托罗拉公司研发，被用于 Moto Aura 上。这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的单独像素，所以也被称为视网膜显示屏。

第三代iPad发布会上，苹果给出了 Retina 设计标准的公式：α＝2tan-1（h/2d）

其中 a 代表人眼视角，h 代表像素间距，d 代表肉眼与屏幕的距离。符合一定像素间距的屏幕，在足够长的距离上可以使肉眼看不见单个物理像素点。这样的屏幕就可被苹果称作 “Retina显示屏” 。将 通常使用距离 代入上公式可知：移动电话显示器的像素密度达到或高于 300ppi 就不会再出现颗粒感；手持平板类电器显示器的像素密度达到或高于 260ppi 就不会再出现颗粒感，而苹果电脑的 Retina 显示器像素密度只要超过 200ppi 就无法区分出单独的像素。

使用 Retina 屏幕的设备拥有的物理像素点数比非高清屏幕高4倍甚至更多，如果仍旧按照设备独立像素来进行绘制的话，同一张图片在 Retina 屏幕上显示的区域只有非高清屏的 1/4。

设备像素比（DPR）

设备像素比（Device Pixel Ratio，DPR）。在浏览器中，可以通过 window.devicePixelRatio 获取 设备物理像素 和 设备独立像素(CSS像素) 的比例。在 devicePixelRatio > 1 的浏览器或手机上使用 canvas 画图，你就会发现绘制模糊。这是因为图片被放大了 devicePixelRatio 倍， 我们处理的时候对其进行像素压缩（在小的屏幕范围内渲染更多的像素）即可实现图片不模糊。

1
<canvas id="canvas" style="width: 1000px;height: 500px;"></canvas>
1
2
3
4
5
6
7
8
9
10
11
12
13
const canvas = document.getElementById('canvas')

// Get display size (css pixels).
const canvasComputedStyle = getComputedStyle(canvas, null)
const elementWidth = parseInt(canvasComputedStyle['width'])
const elementHeight = parseInt(canvasComputedStyle['height'])

// Scaled to account for extra pixel density.
canvas.width = Math.floor(elementWidth * devicePixelRatio)
canvas.height = Math.floor(elementHeight * devicePixelRatio)

// Normalize coordinate system to use css pixels.
canvas.getContext('2d').scale(devicePixelRatio, devicePixelRatio)