最近在做canvas画字体描边遇到模糊问题，探究后发现与设备DPR有关系，随之衍生出一系列概念性的问题，在这里做一个归纳总结
理解像素和分辨率的概念
屏幕设备是由成千上万个小灯泡（发光单元）组成
图像是由成千上万个点阵格子组成，而每个点阵格子就可以是由一个或多个小灯泡形成像素单元，设备控制所有像素单元的颜色形成我们看见的图像。
而分辨率通常用 水平像素数x垂直像素数 来表示
PPI
PPI用来描述屏幕的像素密度，表示每英寸所具有的像素个数，通过屏幕尺寸及屏幕分辨率可以得出屏幕PPI大小，例如 iPhone XS 可以描述为 5.8 英寸 (对角线) OLED 全面屏，2436 x 1125 像素分辨率，458 PPI。
DPI
用来表示打印像素密度，例如 600*600dpi 表示打印机可以在每平方英寸上输出 600*600 个输出点。
其中，电子设备中的图片从打印机打印出来的时候，图片 PPI 和打印机 DPI 有一个翻译，如下图所示：
图中显示器的一格，打印机是 6*6 格，即从一行看，打印机 dpi值= 6 ＊电脑ppi值，假如一幅图在电脑中是 72ppi，那么为了打印效果好（每个墨点有独立数据），打印机分辨率就得是 72*6=432dpi。
物理像素
物理像素就是这些硬件中的小灯泡（最小发光单元）。
逻辑像素和DPR
逻辑像素即 CSS 中的 px 像素！
为了让 100px 在 PPI 不同的屏幕上的物理尺寸大小大致相同，所以才有了逻辑像素。如果没有逻辑像素，在超高 PPI 屏幕上，若按照物理像素设计的UI元素会变得极其微小，难以看清和操作。
那么 100px 实际是由多少个物理像素显示的就是根据DPR决定的!
DPR 即设备像素比，定义了物理像素和逻辑像素之间的大小比例，每一台设备会根据默认缩放以及默认分辨率给出默认的 DPR 值，所以在不同分辨率的设备下看起来100px大小差不多。
我们在代码里 window.devicePixelRatio 获取的就是当前的设备的有效 DPR
屏幕逻辑分辨率
对于100%缩放的屏幕分辨率而言，指的是显示器显示的物理像素点数，例如经常看到的 1920x1080(1K)、2560x1600(2K)、3840x2160(4K) 等，在显示大小（屏幕尺寸）一致的情况下，物理像素点数越多显示效果就会越细腻，则看起来越清晰。
因为多数电脑屏幕的分辨率可以通过电脑的操作系统来调节，所以清晰度看原始分辨率不是一个绝对的衡量标准。
非原始分辨率（逻辑分辨率）必须通过算法拟合重新取样来实现，例如，原始分辨率为3840x2160的显示器在系统分辨率为3840x2160时看起来最细腻，也可以通过用好几个发光单元来表示一个像素以显示成更小的分辨率1920x1080，从而使得桌面、图标、文字、窗口等所有内容都按比例变大了（因为逻辑像素面积变大了），看起来也会更大。
图像分辨率
图像分辨率是指图片内存储的信息量，即图像内所拥有的像素点数，也可以用 PPI 来表示，即每英寸像素数，它和图片的宽高尺寸一起决定了图片文件的大小和图像质量。 用来表示一幅影像的像素越多，结果更接近原始的影像。一幅影像中的像素个数有时被称为影像分辨率，虽然分辨率有一个更为特定的定义。像素可以用一个数表示，譬如一个"3百万像素"数字相机，它有额定三百万像素，或者用一对数字表示，例如"640乘480"，它有横向640像素和纵向480像素（就像VGA显示器那样），因此其总数为640 × 480 = 307,200像素（30.72万像素）。
系统缩放和浏览器缩放
每个设备会有一个默认的系统缩放，一般高PPI设备系统缩放会大于100%使得逻辑像素与普通设备相当的物理像素相当，改变系统缩放会直接影响DPR的值，系统缩放的范围是全局的。例如3840x2160(4K)的设备默认系统缩放为200%，这样1px会占用2个物理像素
浏览器缩放不会改变DPR的值，仅改变当前标签页内容显示尺寸（应用变换矩阵）。
总结
- 在原始分辨率和原始缩放的不同的设备中，100px显示的长短几乎相同
- 在DPR为1的设备中，100px = 100物理像素，设分辨率为1920x1080，则屏幕宽高为1920px/1080px
- 缩小系统原始分辨率，会增大
window.devicePixelRatio（DPR）的值，也会降低清晰度。 - 系统调整缩放，会直接影响DPR，即直接影响逻辑像素px，但不会改变清晰度
- 浏览器调整缩放，不会改变分辨率，也不会改变清晰度，只是视觉变换，类似类似CSS
transform: scale(1.5)，并且不会触发重新布局，相当于内容放大镜效果