How do retina displays work with media queries?

[nixnerd]

So, I read this article the other day:

http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

It’s titled: A pixel is not a pixel.

Here’s what I’m wondering… if retina displays have a WAY higher pixel density and can fit more pixels onto a smaller screen, do media queries still work?

He mentions “CSS pixels” and basically says they are seperate from actual screen pixels.

So, theoretically, media queries should still work to make a site responsive for say an iPhone 5. Right?

[Paulie_D]

Basically…yes.

[Senff]

In essence, an iPhone 5 screen will be treated as 320 x 576. However, the ACTUAL amount of pixels is 640 x 1152.

So a line that is styled as being 160 pixels wide will be taking up half of the width of the screen, but it will be drawn using 320 actual pixels.

Anything you do in the CSS, will be treated as if the screen is 320 x 576, and not the actual 640 x 1152.

[sklokgieters]

Is the ratio always 1:2 then?

[nixnerd]

Since I’ve posted this… I’ve done a LOT more reading on this issue. The ratio isn’t ALWAYS 1:2. Chris Coyier has an excellent tutorial on this exact problem.

[sklokgieters]

Hmm alright, do you maybe have the article for me then? You now have piqued my interest!

[nixnerd]

https://css-tricks.com/snippets/css/retina-display-media-query/

[sklokgieters]

Thanks for the link but I don’t see any explanations about high resolutions that are being treated different with media querys. This is only about targetting them.

Thanks anyway!

[Alen]

Might be helpful http://dpi.lv/

[Author]

Posts