为何整数像素边框会渲染为分数值？1px变0.666667px技术疑问

这事儿核心和**设备像素比（devicePixelRatio）**直接相关，给你掰明白逻辑：

设备像素比是屏幕物理像素和网页CSS像素的比值。比如你提到的100%缩放时比值为1.5，意思就是1个CSS像素对应1.5个屏幕实际的物理像素点；133%缩放时比值变成2，就是1个CSS像素对应2个物理像素。

浏览器渲染时，为了让边框这类元素显示得清晰不模糊，会自动把你设置的整数CSS像素，转换成能匹配物理像素整数的CSS像素值——毕竟物理像素是屏幕最小的显示单位，没法显示半个。反过来用getComputedStyle获取的，就是浏览器调整后的这个实际CSS像素值，所以会出现1px变成0.666667px的情况：比如要显示1个物理像素的边框，对应的CSS像素就是1 / 1.5 ≈ 0.666667px。

看你给出的代码示例：

for (d of [d1, d2, d3, d4]) d.innerHTML += 'px ' + getComputedStyle(d)["border-width"]

<div id="d1" style="border: 1px solid">1</div>
<br>
<div id="d2" style="border: 2px solid">2</div>
<br>
<div id="d3" style="border: 3px solid">3</div>
<br>
<div id="d4" style="border: 4px solid">4</div>

不同整数边框对应的计算结果，都是浏览器根据当前设备像素比做的适配调整，本质是为了让元素在屏幕上的渲染更精准。

参考资料翻译 #

• Firefox下获取边框宽度异常
• 设备像素比（window.devicePixelRatio）：该属性表示物理像素与CSS像素的比例。物理像素是屏幕硬件的实际像素点，CSS像素是网页布局使用的抽象单位。当浏览器缩放或屏幕为高DPI屏幕（如Retina屏）时，该比值会大于1。你测试的100%缩放时比值为1.5，133%缩放时为2。

内容的提问来源于stack exchange，提问作者Friedrich -- Слава</think_never_used_51bce0c785ca2f68081bfa7d91973934>