When adjusting layout for mobile devices, Media Queries usually make alterations against the horizontal resolution, delivering a necessary experience for that relatively cramped environment.
This is preferable to the legacy system of UA-sniffing, but it comes with an inherent flaw:
Without the capability to detect and respond to physical screen dimensions, there is no reliable way to know whether a device is actually mobile. As mobile device resolutions increase to meet or exceed many large-screen devices, Media Queries will fail as an adequate solution.
Simply using one layout for all comers will not work, as there are physiological considerations to be made. Large buttons work well on a 4" touchscreen, but are superfluous, even damaging, on a 24" screen.
The core of the issue resides in CSS units. The "in" and "cm" units are so-called logical measurements, not actual, physical measurements absolute to the true screen size.
Adjust the physical units of CSS so that they do correspond to physical dimension when the rendering engine is at a scale of 1.0. They are seldom used as-is, and the risk of breakage in Standards Mode would be minimal. However, if this risk is still of concern, introduce the new units "pin" and "pcm", which stand for "Physical Inches" and "Physical Centimeters", respectively.
Provide window.screen.physicalWidth and window.screen.physicalHeight, both of which contain the appropriate measurements as Numbers. The unit for these, whether inches or centimeters, is not important. If both were to be provided (so as to spare hundreds of thousands of developers the task of looking up the conversion ratio), then instead of Numbers, the properties contain Object literals as such:
If these or similar actions are not taken, once the pixel resolutions of small screens and large screens begin to intersect, Media Queries will quickly give way again to UA sniffing as the preferred method for delivering layouts to varying devices.
> Without the capability to detect and respond to physical screen dimensions, there is no reliable way to know whether a device is actually mobile.
It's not clear to me what the intended use is.
What is a mobile device? Does a 17" notebook count as such?
"Mobile" in the cellphone sense. Devices with screens small enough to warrant changing the layout of an application.
I use mobile as a direct example, because today the most common use for Media Queries is to alter a layout for smartphones.
However, this need could extend in the future to a variety of screens, from wristwatch-sized displays to jumbo displays in stadiums.
Consider an iPod nano-sized device — http://www.apple.com/ipodnano/ — which runs applications made with web standards. Or consider a 2.8"-wide smartphone display with a 720p resolution. These are a couple instances where decisions cannot be made suitably based on pixel measurements.
To put it in other words, Webkit is currently out-of-spec for Absolute Units:
The CSSWG resolved to set the physical units and the px unit to a fixed ratio of each other for backwards-compatibility reasons. We should not go against this.
The CSSWG is interested in providing an optional switch to turn on "real physical units" or something similar, but any work in that area should go on in the standards group, not via innovation in Webkit.