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
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...
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.