javascript - 浏览器缩放大小的实现原理

Question

RT,因为个人使用习惯的原因，使用chrome都是把默认缩放比例调成90%的，今天测试一些页面的时候出现了样式错乱的问题，然而在缩放比例为100%的情况下，所有的浏览器测试都正常，并且在低分辨率的电脑上测试也正常，所以萌生了了解缩放原理的想法，查了一些资料后说是更改了html标签的width和height，然而经过实际测试并不是这样的，所以想问问各位大牛，浏览器缩放的原理究竟是什么，谢谢

Answer 1

我们正常看到的显示的页面一般为设备像素的大小（100%缩放），或者更准确的说是设备像素与css像素为1:1下的场景。当我们缩放屏幕的时候，设备像素不会变化，但css像素会变化。具体的推荐你看这篇博客：https://www.quirksmode.org/mo...

Answer 2

雷雷

Answer 3

CSS 有 zoom 属性，可以控制内容的缩放。浏览器的缩放大概实现方式类似吧。至于错位问题，大部分浏览器对字体都有默认的最小值，当小于最小值后，文字并不会被缩放，导致了内容的折行，从而把布局撑开。