• The Nokia Xpress and UC Mini width and height values are out of touch with reality. I assume both have a generic layout viewport size defined on the server, which is used in every instance regardless of device.

• Android WebKit 2 is not entirely reliable, although it isn’t way off, either. It gets confused with initial-scale=2: measured height way too big. Then again, who cares?
• Android WebKit 4 is messy. The Sony, Samsung, and Whoop handle it fine. The HTCs and Huawei handle the toolbar right when you’re at original zoom, but as soon as you zoom in a bit the height changes — I think to viewport height minus toolbar, but I can’t measure that. The LG mostly gives the right value, except in test 1 in portrait mode.
  Et cetera et bloody cetera. Don’t be surprised if it doesn’t work.
• In Puffin document.documentElement.clientHeight seems to be off in the third test, but the media query works — I think.
• Xiaomi, Opera, and Google Chromiums react to the toolbars. The others don’t — though the Samsung one has a fixed toolbar so it shouldn’t react. Possibly this behaviour changed between Chromium 33 and 37.
• UC has its own take on toolbars: it subtracts them from the layout viewport height when present, but ONLY on page load. Once the page has loaded the height becomes a constant.
• IE9 and 10 always use the portrait height if there’s no meta viewport height, even in landscape. This bug is solved in IE11.
• The height on Firefox on Android is off by a minuscule number of pixels, except when you use a meta viewport.
• The height on Firefox OS is off by a considerable margin. With meta viewport I expect 455, but it's 505. This may be the toolbar size, but even if it is that’s wrong.

• Android WebKit 2 has issues with height. Width works fine, though.
• The two Chinese UCs work fine. The English one on the S4, however, reports a font-size of 17px, but the tests fail at both 16 and 17px.
• The Nokia Xpress and UC Mini em values are out of touch with reality. 96.5em and 64em width, respectively.
• Opera Mini reports initial font-sizes of 15px (BlackBerry), 16px (iPad), and 17px (Android), but always uses 16px as the font-size for ems.
• Firefox has problems with the height; very slight ones on Android; considerable ones on Firefox OS.

Important: This tests whether the device-width/height media queries are equal to screen.width/height. However, screen.width/height have two competing definitions: either the dimensions of the ideal viewport, or the physical pixel count on the screen. See this table for the details.

• Most Android WebKits 4 are static. However, the HTC and Whoop ones are Portrait.
• Google Chrome on Motorola is static; the one on the Nexus 7 is dynamic.
• Xpress and UC Mini report idiotic values: 1280x1024 (I think) and 800x600, respectively. In UC Mini they’re equal to screen.width/height.
• Opera Mini on Android and iOS are right; I doubt the BlackBerry values, though.
• In Opera Classic screen.width/height excludes the toolbar. On the plus side, the media queries change when you change the orientation.
• In Firefox OS, and Firefox Android on LG but not Samsung, the measurement of the widest side (height in portrait, width in landscape) is off. On the plus side, the media queries change when you change the orientation.

• In the LG Android WebKit 4 the portrait values are just wrong, period. Landscape’s fine, though.
• Puffin’s vertical measurements in landscape mode are off.
• Xpress and UC Mini report idiotic values.
• I don’t trust the Opera Mini on BlackBerry reading (20/21). Android and iOS are fine.
• On Firefox OS the aspect ratio media query is not the same as document.documentElement.clientWidth/Height.

• Android WebKit 4 is mostly static, except for the Whoop and HTCs, which are Portrait.
• Google Chrome on Motorola is static; the one on the Nexus 7 is dynamic.
• Xpress thinks it’s 5/4, which is wrong.
• In Opera Classic screen.width/height excludes the toolbar.
• IE11 should have ratio 3/5 but has 364/606.
• In Firefox OS, and Firefox Android on LG but not Samsung, the device-aspect-ratio media query is not the same as screen.width/height.

• The iPhone 6+ returns 3 while it should return 2.60869565217391. Other iPhones and iPads get it right.
• Chromium Puffin says 1, but it should be 2.
• IE11 supports -webkit-device-pixel-ratio. (And no, -ms-device-pixel-ratio is not supported.)

• Nokia Xpress can’t change orientation.
• UC Mini always reports landscape.

• Chromium Puffin says 1, but it should be 2.
• Opera/Presto uses a ratio (i.e. 1/1) instead of a number. This is wrong; the media query should have exactly the same value as the devicePixelRatio property.
• Opera Mini reports 1dppx (regardless of device), which is wrong. If we accept that value, it would be logical if it also reported 96dpi, but mysteriously it doesn’t.

• The Huawei Android WebKit 4 doesn’t support it. The others do.
• The Firefox on Samsung supports it; the one on LG doesn’t.

The correct answer is: No, this is not a grid.

The correct answer is: No, this is not a monochrome. That said, the Sony e-reader, which is the single monochrome device in my test array, also reports No.

none, coarse (fat finger) or fine (precise mouse cursor)

• Xpress and UC Mini report they’re not on touchscreen devices.

Android 2 and UC self-report no support for transform-3d.

Mobile browsers should be of types all and screen, and possibly handheld.

@media (min-width: 50px)

Does this syntax work?

@media (min-width: 50px) and (min-device-height: 1em)

Does this syntax work?

@media (min-width: 50px),(min-device-height: 1em)

Does this syntax work?

@media not all and (min-width: 50px)

Does this syntax work?

The media type is required. Once you start thinking about it it’s convoluted. Why not just @media not (min-width: 50px)?

@media min-width: 50px

Does this syntax work?

@media all{
	@media (min-width: 50px) {
		// styles	
	}
}

Does this syntax work?