javascript - Implementation principle of browser zoom size

Question

RT, due to personal usage habits, when using Chrome, the default zoom ratio is adjusted to 90%. When testing some pages today, the style disorder occurred. However, when the zoom ratio is 100%, All browser tests were normal, and the tests on low-resolution computers were also normal, so I came up with the idea of ​​​​understanding the principle of scaling. After checking some information, I said that the width and height of the html tag were changed. However, after actual testing, it did not work. This is not the case, so I would like to ask all the experts, what is the principle of browser scaling, thank you

Answer 1

The displayed page we normally see is generally the size of the device pixels (100% zoom), or more accurately, it is a scene where the device pixels and CSS pixels are 1:1. When we zoom the screen, the device pixels will not change, but the css pixels will. For specific details, I recommend you read this blog: https://www.quirksmode.org/mo...

Answer 2

html {
  zoom: 90%
}

Answer 3

CSS has the zoom attribute to control the zoom of content. The browser's zoom is probably implemented in a similar way. As for the misalignment problem, most browsers have a default minimum value for fonts. When it is less than the minimum value, the text will not be scaled, causing the content to wrap, thus stretching the layout.