[FE] Chrome 缩放对Computed Style的影响

1. 问题

有一个页面,在本地开发的时候,设置了字体 font-size: 12px;
但是,它的 Computed Style 却一直是13.3333px

[FE] Chrome 缩放对Computed Style的影响_第1张图片
[FE] Chrome 缩放对Computed Style的影响_第2张图片

2. 排查

我把所有DOM结构都删掉了,去掉了所有其他的样式,
结果还是 13.3333px

新建了一个空的html,设置字体为 font-size: 12px;
结果是正常的。

苦思无果只好进行google,以关键词 css font-size 13.3333px 搜到了答案,
chrome下设置字体大小问题:10px=11.1111px 12px=13.3333px 为什么
答案令人可笑,却反映了个人知识的盲区。

那就是这个页面使用了Chrome 缩放 90%
因此该域名下所有页面的Computed Style受到了影响。
我之前并不知道调整Chrome 缩放会影响它。

3. 解决

将缩放调整会100%,问题就解决了。


参考

chrome下设置字体大小问题:10px=11.1111px 12px=13.3333px 为什么
更改文字、图片和视频大小(缩放)

你可能感兴趣的:([FE] Chrome 缩放对Computed Style的影响)