问题
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?
回答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).
回答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/
回答3:
Media queries like @media screen and (min-width: 700px) and window.innerWidth use css pixels. At first when mobile devices were really 320px, css pixels and real pixels were the same. Now new devices with 800px and the same size still report 320 css pixels.
And that is really good for designing backwards-compatible websites. Essentially @media screen and (max-width: 480px) can be translated to: Small, taking into account eyes to screen distance, and screen size (in meters not pixels).
So the css pixel acts as a reference measure more than anything else.
Real pixels, dpi, screen type and orientation can or will be available with media queries. But it could be an anti-pattern to use those.
Also don't forget viewport meta tag.
来源：https://stackoverflow.com/questions/19475907/media-query-about-screen-size-instead-of-resolution