PPI or pixels or something else for mediaqueries on HD screens?

Question

I'm doing some doodling around with responsive design(Finally, right?) and asked myself a question whilst using media queries: "What happens when i use this on a retina screen?".

So i started wondering if it's still proper to use pixels when targetting HD screens. I mean @media only screen and (min-width: 5 billion px) seems like a stupid thing to do.

So i wondered what the best practice is. Does the PX scale on HD screens? Or should i use DPI or device-pixel-ratio or perhaps something completely different?

My aim is to target pretty much all the screens for a mobile-only page. Pure for practice purposes and seeing for myself what is possible and logical.

My question pretty much is as follows: How can i target HD screens apart from the 'normal' screens in an all-round solution where i can make exceptions for both HD and normal def screens built for 'the future'.

Answer 1

Well, 160 DPI is the baseline for screen PX density - since it is 1:1 screen PX to device PX. The Retina display is 2:1 screen PX to device PX which is 320-330 DPI.

So, if you are only aiming to make it work for Retina

min-device-pixel-ratio: 2;
min-resolution: 192dpi;

Should be fine. However, Android for example supports a range of devices with a different DPI; including 160 DPI ("mdpi"), 240 DPI ("hdpi"), 320 DPI ("xhdpi"), and between.

Edit: Added example below.

@media
only screen and ( -webkit-min-device-pixel-ratio: 1.25 ),
only screen and ( min--moz-device-pixel-ratio: 1.25 ), 
only screen and ( -o-min-device-pixel-ratio: 1.25 / 1 ),
only screen and ( min-device-pixel-ratio: 1.25 ),
only screen and ( min-resolution: 200dpi ),
only screen and ( min-resolution: 1.25dppx ) {}

Answer 2

I assume you are using the standard practice of setting the browser scaling via meta viewport (or for non-WindowsPhone8 IE10, @ms-viewport) width = device-width.

In that case the CSS "px" units you reference in your width/height media queries will very roughly correspond to one physical pixel on a 160ppi screen regardless of it being high PPI or not. In reality it can range from ~130ppi to ~180ppi.

So if you are ok with this inaccuracy in the physical screen sizes that will match your width/height "px" media queries, go right ahead. Just make sure you are enabling the hardware developer defined "css layout px" to "physical pixel" scaling available on pretty much every modern mobile device in one form or another.

Note: It is also possible to rely on some clever javascript to glean more accurate PPI readings from clients. I currently do this in order to acquire a unified PPI value across both mobile and desktop, a task which can get messy (think desktop "Page Zoom" vs "Viewport Zoom" vs "System Zoom") considering that currently all non-IE browsers have similar issues stuck on their bug-trackers indicating a severe architectural schism between mobile and desktop in relation to pixel scaling/zoom/ratio/whatever