CODEWITHSUNDEEP
cssresponsive-designmedia-queries
HypOrg
HypOrg

Reputation: 43

CSS Responsive Design for High vs. Low Pixel Density Devices?

I'm a bit confused about CSS pixels and whether they translate into pure resolution or physical width of devices. My question is, will content displayed on a 1080p 13 inch laptop be the same as content on a 4k 13 inch laptop? Or will everything be scaled down?

(I'm using (max-width)/(min-width) media queries and not (max-device-width)/(min-device-width) I'd be glad if you guys could clear this up for me.

Upvotes: 4

Views: 2274

Answers (2)

user9183335
user9183335

Reputation:

Yes, it should render the same.

CSS uses “px” to relate “...the pixel unit to the reference pixel...”, thus a single CSS “px” could represent more than one physical pixel as different devices (ie. HD vs. 4K) have different pixel densities.

A single “px” in CSS should always be about 1/96 of an inch though. You may see variations in rendering based on browser rendering and/or monitor resolution quirks.

Upvotes: 2

smashed-potatoes
smashed-potatoes

Reputation: 2222

For most cases, desktop and laptop displays will use the same pixels their resolution is set to for CSS pixels. In these cases, a 4k 13" laptop without scaling will display more content, at a smaller physical size, than a 1080p 13" laptop.

That said, there are some cases where this isn't quite true. With mobile devices the browser will use a scaled down resolution so that elements are rendered at a more natural physical size. This scaling can be determined by the devicePixelRatio - which is the ratio of physical pixels to CSS pixels.

Further reading about devicePixelRatio: https://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html

Details on sizes for mobile devices: https://mydevice.io/devices/

Upvotes: 1

Related Questions