「这是我参与2022首次更文挑战的第34天，活动详情查看：2022首次更文挑战」
devicePixelRatio,字面意思就是设备分辨率比值。 具体就是逻辑分辨率和物理分辨率的比值。
物理分辨率
物理分辨率，就是真实存在的，设备固有的的，没法改变。大概意思就是说，单位英寸面积内所包含的像素点个数。
逻辑分辨率
简单一点理解，就是我们写的数值，比如12px 。 px本身也是个距离单位，其大小约为 1/96 inch。这是在dpr等于1的情况下。 在这种情况下，12px的逻辑值就对应实际上的12px。
dpr
假如，现在我们画了一个正方形div， 边长12px。我们假设其内部刚好对应12 X 12 个像素点。 然后我们 ctrl + + 。 放大200%。 我们都知道这个时候，我们视觉上看起来这个盒子就是 24 X 24， 相信自己的眼睛，眼见为实。 但是我们打开devtool，测量一下，它还是12px的边长。也就是说，现在它的物理像素是 24 X 24 ，但是逻辑（我们开发者写的逻辑，哈哈）像素是12 X12。
现在dpr === 2。 pdr是计算单位长度的像素比 dpr = 物理分辨率 / 逻辑分辨率。 逻辑上这一行只有12 ，但是实际上却有24. 这种情况就是，用2个实际像素点去对应逻辑上的一个像素点。
也就是说，原本只需要一个像素点就能显示的元素，现在需要4个像素点来显示了。这就是放大，我们的视野并没有变大，反而变小了，因为显示器尺寸没变，显示的图像尺寸变大了。
很多时候，放大浏览器会导致原本的布局被破坏。有的客户想要所谓自适应。 我们要明白一点， 所谓放大就是在缩减宽度（浏览器一般情况认为高度无限）， 所以如果要适配这玩意，其实就是要在更窄的设备上显示更大尺寸的图，他不配！ 具体情况具体分析，反正就是适配宽度变窄的情况，比如原本1500px宽的屏幕， 他们用150%显示，那结果其实就是浏览器 窗口最大也就是1000px。我一般是直接拒绝的，因为内容太满了，又都是表格，加上原本的导航布局（除非我给导航来个反向随缩放，为何不写，因为确实麻烦，这种东西一般都是临时提出，他们就随口一说。除非开始就要求这么做）。
最后
实际尺寸 = dpr * 逻辑尺寸。 在移动端体现尤为明显，就比如我们写个12px的字，设备dpr是3,结果眼睛看到就是36px。
缩放（逻辑分辨率的变化）是可以监听的。 使用 matchMedia，不过有点小问题，没弄明白。 我这个初始值是1 ,其监听范围就是[1, 1.5]， 我后面又操作了几次发现这个范围又变小了，搞不明白。超出这个范围的变 化就监听不到。 于是我想了另外一个办法，就是监听 resize事件， 判断dpr有没有发生变化。 因为一般来说，改变dpr的同时不会也去实际窗口大小，所以这个办法应该能行。
监听键盘事件是可以，但是如果人家用鼠标操作呢。
