知识分享：物理分辨率与逻辑分辨率？
背景摘要
前段时间做了一个
canvas渲染的降级
指路➡️ 《Phaser3渲染哲学》
，但是好巧不巧，原本只用运行在PC、Pad端的产品本次得适配移动端了，于是遇到了如下问题：
通过图片可以看到画面变糊了，所以问题出在哪里呢？
回顾上次我们将
逻辑分辨率进行1：1渲染，理论上是可以适配绝大多数电子产品的屏幕，但是有些设备的物理分辨率会高于逻辑分辨率，PPI为2~3。
此时在单位空间内实际存在若干个像素点，但是我们只渲染一个，这样就出现了问题。
概念科普
上面的我们引出了三个概念，逻辑分辨率、物理分辨率和PPI，下面是它们的基本概念：
- 逻辑分辨率：软件可以达到的
- 物理分辨率：硬件所支持的
- PPI：屏幕上每英寸可以显示的像素点的数量（
Pixel Per Inch）
该如何理解上述概念呢？
现在有一台PC，屏幕尺寸为24寸，分辨率是1920x1080，这就是它的硬件指标-物理分辨率，此时有一个软件开发商开发了一款软件，该软件固定像素横向以1920像素渲染、纵向以1080像素渲染，那么它就刚好铺满整个屏幕。
客户们使用的很开心。
然而，优秀的显示器开发商对硬件进行了升级，在同样24寸的条件下，分别把横纵向像素增加到了原本的两倍，横向分辨率增加到了3840个，纵向分辨率增加到了2160个，换个角度来说是原本一个单位空间的位置只渲染1个像素点，但本次得渲染4个像素点。
用户们开心的买回了新显示器，打开软件一看，怎么不能铺满整个屏幕了？
哦~原来是当时的软件被设计为固定像素渲染，当现在像素增多，它还是只渲染自己该渲染的那一部分。
这个时候，聪明的系统开发者加入了讨论，说：”我们设定一个叫做'逻辑分辨率'的东西，通过它来告诉运行在系统上的软件该以多少倍的像素来渲染。“
于是乎软件开发商觉得很赞，采取了这个措施，软件又可以在新款3840x2160的屏幕上全屏使用了。
Retina屏的诞生
伴随iPhone4进入大众视野，当时Retina屏的PPI已经达到肉眼无法看到的级别，从技术上来说就是Apple在物理尺寸与上一代相同的屏幕上塞下了
2倍的像素（ 相较于前代iPhone3GS）。
iPhone 4采用
Retina显示屏，在物理尺寸不变的情况下，像素成倍增加，达到了640x960像素。iPhone 3GS屏幕上有320 x 480 = 153600个像素点，而iPhone 4屏幕上则有640 x 960 = 614400个像素点，像素个数是原来的4倍。
苹果是这样处理的：选择在长宽比例不变的情况下，直接将分辨率扩大4倍，将以往1个像素的位置用4个像素渲染，同时将这种体系推广给开发者，由于开发者只需要将之前应用中的图片放大4倍即可，所以后期应用适配也非常快。
结合Retina屏幕的诞生，是否可以更理解上面的概念了。
多倍图的出现
如果开发者们有幸与公司UI小姐姐们打交道，就会发现她们提供的UI稿件网址在下载切图时（拿iOS为例）会有多个选项：
# 补充说明一点，iOS多倍图规则：
# 截止3GS这代以前都是 @1x;
# iPhone4-8（不包括Plus），iPhoneXR iPhone11，iPad @2x;
# iPhone6Plus - iPhone8Plus，iPhoneX、XS、XS Max、11 Pro、11 Pro Max、12全系 @3x
什么是多倍图呢？按照上文的描述和开发规范，那么想要在升级后的硬件设备中正常渲染图片，就得找到对应版本切图。
一倍图：当这个比率为
1:1时，使用1个设备像素显示1个CSS像素。
二倍图：当这个比率为
2:1时，使用4个设备像素显示1个CSS像素，
三倍图：当这个比率为
3:1时，使用9（3*3）个设备像素显示1个CSS像素
如何找到该用哪种版本的图片呢？请接着读下文。
H5如何知道设备缩放比
前端的设备缩放比：
// 直接使用window对象下的devicePixelRatio
window.devicePixelRatio
Window 接口的devicePixelRatio返回当前显示设备的物理像素分辨率与CSS像素分辨率之比。 此值也可以解释为像素大小的比率：一个CSS像素的大小与一个物理像素的大小。 简单来说，它告诉浏览器应使用多少屏幕实际像素来绘制单个CSS像素。
所以在对应设备上渲染Canvas时，只需要将分辨率乘以设备缩放比即可。
当处理标准显示器与HiDPI或Retina显示器之间的差异时，这很有用，后者使用更多的屏幕像素绘制相同的对象，从而获得更清晰的图像。
当在不同设备下打印时会有不同的结果：
24寸1980x1080屏幕 devicePixelRatio：1：
15寸物理分辨率2880x1880，实际渲染逻辑分辨率1920x1220 devicePixelRatio：2：
iPhone12物理分辨率2532x1170 devicePixelRatio：3：
iPad Pro 11英寸物理分辨率2388×1668 devicePixelRatio：2：
生活中的PPI
计算公式：
(Width2+Height2)/Inch\sqrt{(Width^2+Height^2)} / Inch
以iPhone12为例，官网给的介绍如下图所示：
计算所得结果为：460.272526815668487符合官网的理论值。
总结
上述介绍了物理、逻辑分辨率，PPI，Retina屏等基础概念，下面结合基础概念展示如何区分设备缩放比以及前端开发针对Canvas渲染的注意事项，希望能对大家有所帮助。