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 6 December 2013.

These tables aren’t entirely ready yet. I have trouble with some definitions, and parts should be changed. But I had to rush them out in order to serve the desktop media query discussion.

width and height

Selector iOS Android Chrome Opera BlackBerry Nokia UC Puffin Nintendo Dolphin Tizen One IE Firefox
6 7 2 4 18 30 Mini Mob 12 Mob 16 6 7 PB 10 Xpress MeeGo Anna Belle Mini 8 9 9 10 OS And
Should be equal to document.documentElement.clientWidth Yes Yes Yes Yes Yes Incorrect Yes Buggy Yes Yes Yes Bug Yes
  • Xpress always uses 240px, the ideal viewport width, even if the layout viewport has another width.
  • UC Mini reports a width of 1024px, which is patently false; looks like about 360px to me.
  • UC 8 is correct within the constraints of its very weird meta viewport implementation.
  • In the test without a meta viewport, IE10 gives 800px while it should be 1024px.
Should be equal to document.documentElement.clientHeight Yes Toolbar Yes Toolbar Toolbar Yes Incorrect Yes Buggy Yes Buggy Yes Toolbar Yes Incorrect

General note: the browser toolbar is the major problem here. WHen it’s present the height is different than when it’s absent, and since in general it’s present when a page loads, media queries may misfire once it is scrolled away.

The iPhone ignores this problem by some magic. Puffin too.

Chrome 18/BB has a fixed toolbar, so the problem doesn’t occur.

Xpress can't change orientation

  • Height doesn’t quite work in Android; probably because the toolbar is visible when the test page loads.
  • The LG L5 in portrait mode sometimes has issues with height. Not with width, though.
  • Toolbar alert Opera Mobile 12.
  • Xpress always uses 382px, the ideal viewport height, even if the layout viewport has another height.
  • UC Mini reports a height of 800px, which is patently false; looks like about 480px to me.
  • Puffin’s height is unreliable.
  • One has issues with toolbars in landscape.
  • FF has issues with height in all tests but the first in landscape mode.
Selector iOS Android Chrome Opera BlackBerry Nokia UC Puffin Nintendo Dolphin Tizen One IE Firefox
6 7 2 4 18 30 Mini Mob 12 Mob 16 6 7 PB 10 Xpress MeeGo Anna Belle Mini 8 9 9 10 OS And
May be better than ems in the future No Yes Yes No No Yes No Yes No Yes No Yes No Yes No No Yes No Yes Yes
Should be equal to screen.width/height

NOTE that what I test here is the equality of media query and JavaScript property, and not their meaning. This will be changed in a future version.

Meanwhile, see this page for the meaning in the various browsers.
Portrait Static Portrait* Static Yes Incomplete Static Static Yes Static Incorrect Static Yes Static Static Yes Static Portrait Portrait Yes
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.

Opera Mini/UC Mini cannot re-evaluate media queries without a page reload, so static behaviour is expected.

Nintendo can't change orientation.

  • Chrome 18 calculates screen.width/height in device pixels, but the media query in CSS pixels. Thus the media query indicates the ideal viewport. This is not wrong, but it breaks the equality of the JS property and the media query.
    Also, I think it does portrait only, but I’m not sure.
  • Opera/Presto on Symbian gets the wrong values. On Android it does it right.
  • Xpress is insane: a device-width of between 1200 and 1300px.

Other viewport-related

Selector iOS Android Chrome Opera BlackBerry Nokia UC Puffin Nintendo Dolphin Tizen One IE Firefox
6 7 2 4 18 30 Mini Mob 12 Mob 16 6 7 PB 10 Xpress MeeGo Anna Belle Mini 8 9 9 10 OS And
Yes Yes Yes Yes Toolbar Yes Yes Yes Buggy Yes Yes Toolbar Yes Issue
RETEST iOS, Android, Chrome re toolbar

BB/Xpress/MeeGo/Symbian no toolbar issues

  • Toolbar issues in Opera/Presto on Android and One. It’s always subtracted from the screen width.
  • UC 8 gives weird results.
  • I think Firefox gives the correct ratio, but it’s not equal to document.documentElement.clientWidth divided by -Height.
Portrait Static Portrait Static Yes Issues Static Static Yes Static Incorrect Static Static Buggy Static Static Yes Static Portrait Portrait Yes
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.

Opera Mini does the same, but since it cannot re-evaluate media queries without a page reload this behaviour is expected.

UC is static in landscape.

Nintendo can't do orientation change.

  • Safari and Chrome 18 always return the smallest device-aspect-ratio; i.e. 9/16 in both portrait and landscape, even though landscape should be 16/9.
  • Issues on Opera/Presto on Symbian. Android does it right, dynamic.
  • Xpress thinks it’s 5/4, which is wrong.
  • UC 8 gives weird results.
Selector iOS Android Chrome Opera BlackBerry Nokia UC Puffin Nintendo Dolphin Tizen One IE Firefox
6 7 2 4 18 30 Mini Mob 12 Mob 16 6 7 PB 10 Xpress MeeGo Anna Belle Mini 8 9 9 10 OS And
Prefixed Yes Yes Yes Incorrect Yes Yes No Yes No Yes Incorrect Yes No No
  • 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.
  • In addition, Opera Mini always says 1/1, even on devices with a higher DPR.
  • Puffin and Dolfin report 1 on a device with 2.
  • Nintendo reports 1 on a device with 1.49.
Yes Yes Yes Yes Yes Yes Buggy Yes Yes Yes Yes
  • UC Mini always reports landscape.
No No No Yes Weird Yes No Incorrect No Incorrect No No Incorrect Incorrect Yes
  • Opera Mini says it doesn’t support dppx, but then performs the equality test with window.devicePixelRatio correctly. Still, its dpi reading is always 96dpi (= 1 dppx), except on the Galaxy Note, where it is larger than the expected 288dpi/3dppx.
    Don’t trust resolution in Opera Mini.
  • I don’t trust the resolution in Xpress, either. Says between 96 and 144dpi.
  • UC Mini says 96dpi, but that should be 192dpi.
  • IE gives 96dpi, but it should be 144dpi.
  • The Firefox OS values are not in contact with reality.
- - - Yes Vague Yes - No - No - - No Yes

This is just about whether the browser supports the dppx unit at all. Its readings may be incorrect; see above.

Selector iOS Android Chrome Opera BlackBerry Nokia UC Puffin Nintendo Dolphin Tizen One IE Firefox
6 7 2 4 18 30 Mini Mob 12 Mob 16 6 7 PB 10 Xpress MeeGo Anna Belle Mini 8 9 9 10 OS And

Features

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

Selector iOS Android Chrome Opera BlackBerry Nokia UC Puffin Nintendo Dolphin Tizen One IE Firefox
6 7 2 4 18 30 Mini Mob 12 Mob 16 6 7 PB 10 Xpress MeeGo Anna Belle Mini 8 9 9 10 OS And
Prefixed Yes Yes Yes No Yes Yes No Yes No Yes Yes No No
Yes Yes Almost Yes Yes Sometimes Yes Yes Yes No Yes Yes Yes Yes Yes No Yes

Usually 8

  • The Huawei Android 4 doesn’t support it. The others do.
  • Opera/Presto on Symbian doesn’t support it.
No Yes No No Yes Yes No Yes No Yes No No Yes Yes
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 No No Yes No
Selector iOS Android Chrome Opera BlackBerry Nokia UC Puffin Nintendo Dolphin Tizen One IE Firefox
6 7 2 4 18 30 Mini Mob 12 Mob 16 6 7 PB 10 Xpress MeeGo Anna Belle Mini 8 9 9 10 OS And
No Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes Yes

The correct answer is: No, this is not a monochrome. That said, the single monochrome device I ever studied also said No.

A Mozilla experiment and an old Opera experiment. No No No No No Incorrect No Incorrect No No No Yes
  • Xpress and UC Mini report it’s not on a touchscreen.
Prefixed Yes Yes Yes No Yes Yes No Yes No Yes Yes No No
Prefixed Yes Yes Yes No Yes Yes No Yes No Yes Yes No No

Symbian and UC self-reports no support for transform-3d.

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

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

Synbian supports handheld.

Selector iOS Android Chrome Opera BlackBerry Nokia UC Puffin Nintendo Dolphin Tizen One IE Firefox
6 7 2 4 18 30 Mini Mob 12 Mob 16 6 7 PB 10 Xpress MeeGo Anna Belle Mini 8 9 9 10 OS And

Not supported

The following media queries are not supported by any browser:

Tested browsers

Mobile browser test array 1.2.1; November 2013

iOS 6
WebKit 536
Default browser on iPhone 4S with iOS 6.1.3
iOS 7
WebKit 537
Default browser on iPad 2 with iOS 7.0.3
Android 2
WebKit 533
Default browser on HTC Legend, Android 2.2
Default browser on LG Optimus something, Android 2.2
Default browser on Samsung Galaxy Pocket, Android 2.3.6
Android 4
WebKit 534
Default browser on Samsung Galaxy Note I, Android 4.0.3
Default browser on Sony Xperia S, Android 4.1.2
Default browser on LG L5, Android 4.1.2
Default browser on Xiaomi M2, Android 4.1.1
Default browser on Huawei C8813, Android 4.1.1
Default browser on Samsung Galaxy S3, Android 4.1.2
Default browser on HTC One X, Android 4.2.2
Chrome 18
WebKit 535
Default browser on Samsung Galaxy S4, Android 4.2.2
On Sony Xperia S, Android 4.1.2. This is a downloaded version from Google
It will be interesting to see if Samsung’s purported Chrome 18 is really the real Chrome 18.
Chrome 30
Blink (Chromium 30)
On HTC One X, Android 4.2.2
On Nexus 7, Android 4.3
Opera Mini
Presto
Proxy browser
7.0.5 on iPad 2, iOS 7.0.3
7.1 on BlackBerry 9800 (OS6)
7.1 on Nokia PureView 808, Symbian Belle
7.5 on Samsung Galaxy Note I, Android 4.0.3
Opera Mobile 12
Presto
12.00 on Nokia E7, Symbian Anna
12.10 on Samsung Galaxy Pocket, Android 2.3.6
Opera Mobile 16
Blink (Chromium 29)
On Sony Xperia S, Android 4.1.2
On Nexus 7, Android 4.3
BlackBerry 6
WebKit 534
Default browser on BB Torch 9800 (OS6)
BlackBerry 7
WebKit 534
Default browser on BB Torch 9810 (OS7)
BlackBerry PB
WebKit 536
Default browser on PlayBook with OS 2.1.0
BlackBerry 10
WebKit 537
Default browser on BlackBerry Z10 (BB OS 10.1)
This device has 1GB of internal memory instead of the customary 2GB, which may matter in performance tests.
Xpress
Gecko 20100401; this version was used for some Firefoxes from 3 to 4.
Proxy browser
3.7 on the Nokia Asha 311, S40.
This browser used to be called Ovi. Nokia developed it because it saw how succesful Opera was on Nokia’s own devices.
MeeGo
WebKit 534
Default browser on Nokia N950, MeeGo Harmattan 1.2
Originally slated as Symbian’s successor, MeeGo was ousted in favour of Windows Phone. Some devices were sold, however, and a Finnish company is trying to re-start MeeGo under the name Sailfish. Also, rumour has it that Nokia is quietly hiring back ex-MeeGo people, so a Nokia-based restart is not entirely impossible.
Anna
WebKit 533
Default browser (7.3) on Nokia E7, Symbian Anna
The next-to-last Symbian build. I don’t think it was the prime Symbian build for long; it was replaced by Belle fairly soon. But it’ll be in some people’s pockets.
Belle
WebKit 535
Default browser (8.3) on Nokia PureView 808, Symbian Belle FP2
The most recent Symbian build.
UC Mini
Doesn’t mention a rendering engine
Proxy browser
8.8 on HTC One X, Android 4.2.2
UC
WebKit 534
UC 8.5.1 on Xiaomi M2 (Android 4.1.1)
UC 9.2.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).
Puffin
WebKit 534
2.1 Free Edition on Samsung Galaxy S4, Android 4.2.2
Claims to be Chrome 11
Nintendo
WebKit 536
Nintendo browser 2.0.0 on Wii U 4.0.0
Supposed to be based on NetFront.
Dolphin
WebKit 534
Beta 1.3.1 on Sony Xperia S, Android 4.1.2.
Independent full browser for Android. The non-beta is a skin over the Android default browser. The beta uses their own WebKit port.
QQ One
WebKit 533
4.2.2 on HTC One X, Android 4.2.2
This is the downloadable, international browser TenCent created.
Tizen
WebKit 537
Default browser on Ref.Device-PQ by Samsung; Tizen 2.2
Tizen is an OS jointly being developed by Samsung and Intel. I expect Samsung to start producing devices this year, and it will get a few percent of market share.
IE9
Trident
Default browser on Nokia Lumia 800, Windows Phone 7.5.
IE10
Trident
Default browser on Nokia Lumia 820, Windows Phone 8.0.
Firefox OS
Gecko 18
Geekphone/Telefónica (Peak and/or qcom); Boot2Gecko 1.0.1.0-prerelease
Firefox Android
Gecko 25
25 on HTC One X, Android 4.2.2

Browsers by WebKit version:

533
Android 2
Anna
UC
QQ 2.0
One
534
Android 3 and 4
BB 6 and 7
MeeGo
Puffin
Dolphin
535
Belle
Chrome 18
536
iOS6
BlackBerry PlayBook
NetFront
537
iOS7
BlackBerry 10
Tizen