Media request for screen size instead of resolution

Question

Is there a way to bypass screen width in CSS requests? Today there are phones that exceed the resolution of desktop monitors. However, phones should still display the mobile layout and standard layout desktops.

Therefore, I cannot rely on pixel-based queries, for example, the example below. Instead, I need either a physical measurement or a single pixel density value.

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

Since I did not find such measurements in my research, they may not exist. Anyway, how does this problem usually fit?

Answer 1

Well, for starters, the CSS pixel dimension is angular and decently normalizes between devices. Not really, but enough so that in most cases this is not a problem.

Personally, I measure media queries in em so that they are relative to my font size. I mean, people usually visit the website to read the text found on the website, so if there are enough words in a line, I am satisfied.

You really shouldn't measure with physical (devices) widths, because people may have user interface elements taking up space (or just not launching their browsers in full screen mode).

Answer 2

There seems to be no reliable method to test this today.

I have the same “need” that arises when pixels are not as important as viewing distance combined with screen size.

For example: you may have an iPad with the same resolution as a huge TV, but you can present the content differently on these two devices, because the TV can be quite far away (more than the equivalent of the iPad at arm's length).

There is a @media request for TVs that might help, but support for it right now is probably very scarce. My Google Chrome v32 supports it. Check here: http://cssmediaqueries.com/

Answer 3

Media queries like @media screen and (min-width: 700px) and window.innerWidth use css pixels. At first, when mobile devices were really 320 pixels, css pixels and real pixels were the same. Now new devices with a resolution of 800 pixels and the same size display 320 pixels css.

And it's really good for developing backward compatible websites. Essentially, @media screen and (max-width: 480px) can be translated into: Small, given the eyes on the screen distance and screen size (in meters not pixels).

So, the css pixel acts as a control measure the most.

Real pixels, dpi, type and orientation of the screen may be available or will be accessible using multimedia queries. But it may be an anti-pattern to use.

Also don't forget the viewport meta tag.