Media queries

Back to the index.

CSS3 and CSS4 media queries specification.

Media queries are conditionals for serving up bits of CSS in certain cases.

This is the mobile table. See also the desktop table.

Last major update on 1 October 2014.

width and height

iOS Android Chromium UC 9 BlackBerry Nokia Xpress UC Mini Opera Nintendo Dolphin IE Firefox
7 8 2 4 Sa Puf Cy Xia Op Go 6 7 10 Mini Classic 9 10 11 And OS
Should measure the layout viewport width and be equal to document.documentElement.clientWidth Yes Yes Yes Yes Yes Nonsense Yes Yes Yes
  • 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.
Should measure the layout viewport height and be equal to document.documentElement.clientHeight. Be very careful. Ask yourself if you really need height Yes Toolbar Messy Yes Toolbar Toolbar* Yes Nonsense Yes Toolbar Yes Portrait Yes Almost Incorrect
Toolbar
Incoming and exiting browser toolbars may cause problems. In general a page is loaded when the toolbar is present, and height media queries are evaluated at that moment. That means they may misfire once the user starts scrolling and the toolbar disappears.
Note that some browsers, especially those on non-phone devices, have fixed toolbars. These browsers will never have toolbar problems, obviously.
  • 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.
iOS Android Chromium UC 9 BlackBerry Nokia Xpress UC Mini Opera Nintendo Dolphin IE Firefox
7 8 2 4 Sa Puf Cy Xia Op Go 6 7 10 Mini Classic 9 10 11 And OS
1em = 1rem = initial font size = 16px in most browsers Yes Almost Yes Yes Almost Yes Nonsense wrong Yes Yes Almost
  • 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.
Should be equal to ideal viewport and screen.width/height. Do not use. Use width/height instead Portrait Static Static * Static Static Nonsense Almost Yes Static Portrait Problem

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.

Static
These media queries are static once determined; i.e. they do not update the value they’re checked against when the device orientation is changed. (So if you start in portrait and then switch to landscape, the portrait device-width still counts. Reloading the page solves this.)
Proxy browsers are static by definition: they don’t react to an orientation change in any way.
Portrait
Always shows the portrait dimensions, even when in landscape.
  • 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.
iOS Android Chromium UC 9 BlackBerry Nokia Xpress UC Mini Opera Nintendo Dolphin IE Firefox
7 8 2 4 Sa Puf Cy Xia Op Go 6 7 10 Mini Classic 9 10 11 And OS

Other viewport-related

iOS Android Chromium UC 9 BlackBerry Nokia Xpress UC Mini Opera Nintendo Dolphin IE Firefox
7 8 2 4 Sa Puf Cy Xia Op Go 6 7 10 Mini Classic 9 10 11 And OS
The aspect ratio of the layout viewport. Yes Toolbar Almost Yes wrong Yes Toolbar Toolbar Yes Nonsense OK Toolbar Yes Yes Yes Incorrect
Toolbar
Incoming and exiting browser toolbars may cause problems. In general a page is loaded when the toolbar is present, and height media queries are evaluated at that moment. That means they may misfire once the user starts scrolling and the toolbar disappears.
  • 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.
  • I think Firefox gives the correct ratio, but it’s not equal to document.documentElement.clientWidth divided by -Height.
  • 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.
The aspect ratio of the device screen Portrait Static Mostly static Static * Static Static Nonsense OK Yes Static Portrait Incorrect Problem
Static
These media queries are static once determined; i.e. they do not update the value they’re checked against when the device orientation is changed. (So if you start in portrait and then switch to landscape, the portrait device-width still counts. Reloading the page solves this.)
Portrait
Always shows the portrait dimensions, even when in landscape.
  • 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.
iOS Android Chromium UC 9 BlackBerry Nokia Xpress UC Mini Opera Nintendo Dolphin IE Firefox
7 8 2 4 Sa Puf Cy Xia Op Go 6 7 10 Mini Classic 9 10 11 And OS
Prefixed Almost Yes Yes wrong Yes Yes Yes No Yes No Yes No
  • 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.)
Yes Yes Yes Yes Yes OK nonsense Yes Yes Yes
  • Nokia Xpress can’t change orientation.
  • UC Mini always reports landscape.
No No No wrong Yes No No Nonsense Yes No Yes Yes
  • 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.
iOS Android Chromium UC 9 BlackBerry Nokia Xpress UC Mini Opera Nintendo Dolphin IE Firefox
7 8 2 4 Sa Puf Cy Xia Op Go 6 7 10 Mini Classic 9 10 11 And OS

Features

The useless media queries. Each of them either has insufficient support, or gives useless information.

iOS Android Chromium UC 9 BlackBerry Nokia Xpress UC Mini Opera Nintendo Dolphin IE Firefox
7 8 2 4 Sa Puf Cy Xia Op Go 6 7 10 Mini Classic 9 10 11 And OS
Prefixed Yes Yes Yes No Yes Yes No Yes No No
Yes Yes Mostly Yes Yes Yes Yes Yes Incomplete No
  • The Huawei Android WebKit 4 doesn’t support it. The others do.
  • The Firefox on Samsung supports it; the one on LG doesn’t.
Yes No No Yes No No Yes No Yes Yes
Yes Yes Yes Yes Yes Yes No Yes Yes

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

No No No No No No No Yes No
No Yes No Yes Yes Yes Yes No Yes Yes

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.

iOS Android Chromium UC 9 BlackBerry Nokia Xpress UC Mini Opera Nintendo Dolphin IE Firefox
7 8 2 4 Sa Puf Cy Xia Op Go 6 7 10 Mini Classic 9 10 11 And OS
What kind of pointer does the device have? No No Yes No No No No No

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

A Mozilla experiment and an old Opera experiment. Prefixed No No No No No Incorrect No No Yes
  • Xpress and UC Mini report they’re not on touchscreen devices.
Prefixed Yes Yes Yes No Yes Yes No Yes No No
Prefixed Yes Yes Yes Yes Yes No Yes No No

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

Prefixed Yes Yes Yes No Yes Yes No Yes No No
Yes Yes Yes Yes Yes Yes Yes Yes

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

iOS Android Chromium UC 9 BlackBerry Nokia Xpress UC Mini Opera Nintendo Dolphin IE Firefox
7 8 2 4 Sa Puf Cy Xia Op Go 6 7 10 Mini Classic 9 10 11 And OS

Syntax

Media query syntax.

iOS Android Chromium UC 9 BlackBerry Nokia Xpress UC Mini Opera Nintendo Dolphin IE Firefox
7 8 2 4 Sa Puf Cy Xia Op Go 6 7 10 Mini Classic 9 10 11 And OS
Yes Yes Yes Yes Yes Yes Yes Yes
@media (min-width: 50px)

Does this syntax work?

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

Does this syntax work?

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

Does this syntax work?

Requires a media type Yes Yes Yes Yes Yes Yes Yes Yes
@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)?

iOS Android Chromium UC 9 BlackBerry Nokia Xpress UC Mini Opera Nintendo Dolphin IE Firefox
7 8 2 4 Sa Puf Cy Xia Op Go 6 7 10 Mini Classic 9 10 11 And OS
Yes No No Yes No No No Yes No Yes No No
@media min-width: 50px

Does this syntax work?

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

Does this syntax work?

Not supported

The following media queries are not supported by any browser:

Tested browsers

Mobile browser test array 2.0.1; September 2014

Version 2.x has quite a few changes from 1.3; see my notes.

iOS 7
WebKit 537
Default browser on iPad 2 with iOS 7.1.2
iOS 8
WebKit 600
Default browser on iPhone 4S with iOS 8.0.2
Android 2
WebKit 533
Default browser on HTC Legend, Android 2.2
Default browser on Samsung Galaxy Pocket, Android 2.3.6
Default browser on Sony Reader PRS-T3. I’ve heard it’s Android 2-based, but of course it’s nearly impossible to get some actual information.
Android 4
WebKit 534
Default browser on Huawei C8813, Android 4.1.1
Default browser on Samsung Galaxy Note I, Android 4.1.2
Default browser on Sony Xperia S, Android 4.1.2
Default browser on LG L5, Android 4.1.2
Default browser on Wolfgang AT-AS45FW, Android 4.2.2 (see note below)
Default browser on HTC One X, Android 4.2.2
Default browser on HTC M8, Android 4.4.2
Chromium Samsung
Blink; Chromium 28
Default browser on Samsung Galaxy S4, Android 4.4.2
This is Samsung’s Chrome.
Chromium Puffin
Blink; Chromium 30
Possibly proxy-ish browser; doesn’t make connection to my internal server, but does do some stuff client-side.
3.7 Free Edition on Samsung Galaxy Note, Android 4.1.2
Chromium Cyanogen
Blink; Chromium 33
Default browser on Galaxy Nexus flashed with Cyanogenmod 11, Android 4.4.4
This is Cyanogen’s Chrome.
Chromium Xiaomi
Blink; don’t know which Chromium version
Default browser on Xiaomi M2, Android 4.1.1
Chromium Opera
Blink; Chromium 37
24 on LG L5, Android 4.1.2
24 on HTC M8, Android 4.4.2
This is Opera Mobile.
Chromium Google
Blink; Chromium 37
Default browser on Nexus 7, Android 4.4.2
Default browser on Motorola Moto G, Android 4.4.4
This is Google’s regular Chrome. I test it only on devices where it is the default browser.
UC
WebKit 534
UC 9.9.2 on Samsung Galaxy S4, Android 4.4.2
UC 9.9.2 on Xiaomi M2, Android 4.1.1
UC 9.9.3 on Huawei C8813, Android 4.1.1
The largest Chinese browser. This is the full variant, not the proxy. These browsers were pre-installed (next to Android WebKit; don’t ask me why).
BlackBerry 6
WebKit 534
Default browser on BB Torch 9800 (OS6)
BlackBerry 7
WebKit 534
Default browser on BB Torch 9810 (OS7)
BlackBerry 10
WebKit 537
Default browser on BlackBerry Z10 (BB OS 10.1)
A new BB10 version has been released, but my device cannot connect to the update server.
This device has 1GB of internal memory instead of the customary 2GB, which may matter in performance tests.
Nokia Xpress
Gecko 20100401; this version was used for some Firefoxes from 3 to 4.
Proxy browser
5.5 on the Nokia Asha 311, S40.
UC Mini
Gecko; don’t know version number
Proxy browser
8.8 on HTC One X, Android 4.2.2
9.4 on Motorola Moto G, Android 4.4.2
9.4 on Wolfgang AT-AS45FW, Android 4.2.2 (see note below)
Opera Mini
Presto
Proxy browser
7.6 on Samsung Galaxy S4, Android 4.4.2
8.0 on BB Torch 9800 (OS6)
8.0.3 on iPad 2, iOS 7.1.2
Opera Classic
Presto
12.10 on Samsung Galaxy Pocket, Android 2.3.6
Nintendo
WebKit 536
Nintendo browser 3.0.3 on Wii U (OS version unfindable)
Supposed to be based on NetFront, which in turn is WebKit-based nowadays.
Dolphin
WebKit 534
Dolphin 11.23 with JetPack on Sony Xperia S, Android 4.1.2.
Independent full browser for Android, as long as you install both Dolphin and the Jetpack extension.
IE9
Trident
Default browser on Nokia Lumia 800, Windows Phone 7.5.
IE10
Trident
Default browser on Nokia Lumia 520, Windows Phone 8.0.
IE11
Trident
Default browser on Nokia Lumia 820, Windows Phone 8.1 “Update”
This is a developer phone. That might matter.

Firefox Android
Gecko 32
32 on LG L5, Android 4.1.2
32 on Samsung Galaxy S4, Android 4.4.2
Firefox OS
Gecko
Default browser on T2Mobile Flame, the FFOS reference device. 1.3.0 prerelease

Wolfgang AT-AS45FW note: Wolfgang is a Dutch importer and re-brander of phones. In this particular case they seem to have bought Chinese (? probably) phones, re-branded them, then re-sold them to the Whoop company, which re-branded them and sold them to the Hema chain of supermarkets, which sells them to consumers as the Whoop Echo. Supply chain management FTW!