DPR和元素边框

一、设备像素比(DPR)

window.devicePixelRatio设备像素比(DPR)

设备像素比的值与系统缩放和浏览器缩放有关
默认情况下 DPR 为 1,表示一个物理像素对应一个 css 像素
如果缩放设置到了 200%(不论是系统缩放还是浏览器缩放)，那么表示图像要放大两倍，就需要在两个物理像素点中渲染一个 css 像素的内容，此时 DPR 为 2

window.devicePixelRatio = 系统缩放 x 浏览器缩放

例如在 系统缩放为 125% 、浏览器缩放 100%时
浏览器的 devicePixelRatio 属性为 1 x 1.25 = 1.25

二、系统设置

在 14 寸的屏幕中 windows 系统默认的缩放比例为 150%,此时浏览器的 DPR 为 1.5

🚩 系统默认缩放可以在 设置->缩放 中设置

三、浏览器表现

当设置 div 样式为：

.div {
  border: 1px solid #333;
}

在控制台-元素 右侧的[已计算]面板中会发现，border-width 的值并不是 1px，而是 0.666667px
此时的计算方式：

css像素点 = 物理像素点(想要实际肉眼看到的) / DPR

0.666667px = 1 / 1.5

四、解决方案

如果想强制按照代码中的数值渲染，可以使用以下方案

/*使用阴影模拟边框 */
.div {
  box-shadow: 0 0 0 1px #333;
}