Media query about screen size instead of resolution

Question

Is there a workaround to use physical screen width in CSS media queries? Today, there are phones which exceed the resolution of desktop monitors. However, phones should still display the mobile layout and desktops the standard layout.

So I can't rely on pixel based queries like the example below. Instead, I need either a physical measurement, or one about the pixel density.

@media screen and (min-width: 700px) {

}

Since I haven't found such measurements through my research, they might not exist. Anyway, how is this problem approached typically?

Answer 1

Well, for starters, the CSS pixel is an angular measurement and is decently normalized between devices. Not entirely, but enough so for this to be a non-issue in most cases.

Personally I measure media queries in ems so that they're relative to my font size. I mean, people usually visit a web site to read the text found on the website, so as long as there's a reasonable amount of words per line I'm satisfied.

You really shouldn't measure with physical (device) widths because people may have UI elements taking up space (or simply not run their browsers in full screen).

Answer 2

There does not seem to exist a reliable method for checking this today.

I have the same "need", which arises when pixels are not as important as viewing distance combined with size of screen.

For example: you can have an iPad with the same resolution as a huge television set, but you might want to present content very differently on those two devices, because the television might be located quite far away (more than the equivalent of an iPad at arms length).

There is a @media query for television sets that might help, but support for it right now is probably very sparse. My Google Chrome v32 supports it. Test yours here: http://cssmediaqueries.com/