Pixel size on different monitors

I encountered a strange issue - on one of my monitors a 300x300px square appears as if it were a rectangle - wider than it is tall.

My only explanation for this behavior is that the monitor’s pixels are not perfect squares, but wider than they are tall.

Is this something that can be accounted for when designing front end UIs, or do you just have to accept that certain things will appear differently depending on the display device?

I returned 2 monitors that came as a bundle on a great deal because of precisely this problem. If fiddling with your monitor’s menu to correct the aspect ratio doesn’t work, I’d get a new one for viewing your content. Writing code will always be fine, but the vast majority of devices don’t have this problem if their menus are configured correctly.

does this help?
https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio

or this…
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/resolution

2 Likes

Very much so! thank you