Why browsers show elements bigger than defined in CSS
The developer has implemented my design. The logo is intended to be 180 x 180 px. In Inspector it indeed reads 180 x 180 as the rendered size, but using Screen Ruler (Windows Power Tools) I measured 225 x 225 px, which is 1.25 times bigger.
Then I made a test HTML/CSS project, put div to be 100x100px and it is also 125 x 125 px on my screen when opened in Chrome and Firefox.
My screen is 1920 x 1080px with 16.1 in diagonal, which gives around 137 PPI. Why the object size is bigger in the browser than defined, and does screen resolution and PPI affect this?
Thanks!
2 Replies
(is your browser window zoomed to 125% ?)
No, it's 100%, in Mozzila, Brave and Chrome. But that reminded me that I have 125% zoom by default in Windows. Thanks for your answer, it guided me to the solution!