Browser compatibility — viewports

Related files:

Last major update on 12 November 2013.

Here’s the inevitable compatibility table that goes with my viewport research. It treats the viewports themselves as well as some related items.

position: fixed was moved to the CSS test pages.

Definitions

See A tale of two viewports for a further explanation of these terms.

CSS pixels
Expand and contract with zooming; it’s this pixels that are taken as measurement grid for all CSS declarations.
Device pixels
Formal number of pixels on device. Generally useless to web developers.
Device pixel ratio
The ratio of physical pixel count and ideal viewport. In the iPhone 4G example the device pixel ratio would be 640 / 320 = 2.
See this and this blog post for more information, though these posts use an older definition
Layout viewport
The initial area of the HTML element. CSS declarations such as width: 20% are calculated relative to this viewport. Is usually quite a bit wider than the visual viewport.
Visual viewport
The actual screen viewport through which you look at the layout viewport.
Ideal viewport
The one you get when using width=device-width. See this post for more information.

Viewport properties

This table looks into the properties that are necessary to read out useful information about the three viewports and the two types of pixels.

Test page.

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
screen.width and screen.height

Dimensions of the ideal viewport.

Portrait Layout Physical p+p Yes Layout Yes Both Yes Both avail Yes Both Buggy Physical Physical p+p p+p Physical Yes

This entry pretends that screen.width should return physical device pixels. I had to choose one definition, and opted for the conservative one. Still, it’s possible that I’ll swap definitions in the future.

Physical
Gives the physical screen dimensions.
Portrait
Always gives the portrait values even when in landscape.
Layout
Gives the layout viewport dimensions.
Avail
Gives the available screen height (minus toolbars and such) instead of the actual height.
Both
Device pixel ratio is 1, so the ideal viewport has the same dimensions as the screen and I can’t figure out which one the properties return.
p + p
Physical and portrait
  • The HTC Android 4 always gives portrait values. The other six get it right.
  • Opera 16 on Nexus gives the available ideal viewport. The one on Sony does it right.
  • MeeGo increases DPR from 1 to 1.5 when you use width=device-width.
  • UC Mini gives 800x600, which makes no sense whatsoever.
  • UC 8 is crazy. It should be sent to a sanatorium.
window.innerWidth and window.innerHeight

Dimensions of the visual viewport in CSS pixels.

Yes Layout Yes Yes Incorrect Yes Yes ? Yes Buggy Yes Layout Yes Layout Yes Layout
Layout
Gives the layout viewport dimensions.
  • Opera Mini: always equal to documentElement.client, which contains weird values.
  • I cannot zoom Nokia Xpress and thus cannot test if it supports it correctly. My guess is No, though.
  • UC Mini gives 1024x800, which makes no sense whatsoever. Also, I cannot zoom.
  • UC 8 is crazy. It should be sent to a sanatorium.
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
documentElement. clientWidth and documentElement. clientHeight

Dimensions of the layout viewport in CSS pixels.

Yes Yes Yes Incorrect Yes Yes Yes No Buggy Yes Issues Yes Yes Yes
  • I don’t understand Opera Mini. Sometimes it gives the layout viewport in one orientation and retains those values for the other one, but sometimes it does something else.
  • UC 8 is crazy. It should be sent to a sanatorium.
  • Puffin’s height in landscape mode is wrong.
devicePixelRatio

device pixels divided by dips

Yes Yes Yes Incorrect Yes Yes No Yesish Yes No Buggy Yes Incorrect Yes Issues No Incorrect Yes
  • Opera Mini and Puffin and Dolfin return 1 while they shouldn’t.
  • MeeGo increases DPR from 1 to 1.5 when you use width=device-width.
  • UC 8 is crazy. It should be sent to a sanatorium.
  • Nintendo returns 2, while it should be 1.49something.
  • One’s DPR is correct for portrait, but not for landscape.
  • FF OS gives 1.6875 while it should be 1.5.

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

Mouse/touch coordinates

These tests were last updated on 19 March 2013.

Test page.

Selector iOS Android Chrome Opera BlackBerry Nokia UC NetFront Dolphin One Tizen IE Firefox
5 6 2 3 4 18 25 Mini Mob 12 Mob 14 6 7 PB 10 Xpress MeeGo Anna Belle 9 10
clientX/Y

In CSS pixels, relative to the visual viewport

Yes Yes Yes page Yes Yes Buggy Yes Yes Yes Buggy Yes
clientX/Y = pageX/Y - window.pageX/YOffset
page
Equal to pageX/Y
  • I don’t understand IE10’s values, but they’re wrong.
pageX/Y

In CSS pixels, relative to the layout viewport

Yes Yes Yes Yes Yes Buggy Yes Yes Yes

pageX/Y uses the same coordinate system as position: absolute. This is usually what you want.

screenX/Y

In device pixels, relative to the visual viewport

Incorrect client Yes 0 page client 0 page client+ Yes Buggy Yes Buggy client page+ Buggy client
screenX/Y = clientX/Y * devicePixelRatio * zoom
zoom = documentElement.clientWidth / window.innerWidth
client
Equal to clientX/Y
page
Equal to pageX/Y
  • I’m not sure what Safari is doing, but it’s wrong.
  • BB7 and PB add something to the clientY values to arrive at screenY.
  • I don’t understand the Xpress and MeeGo values.
  • Tizen uses pageX/Y, but adds something to the Y.
  • I don’t know what IE is doing, but it’s wrong.

Meta viewport

Below you find a series of tests aimed at changing the width of the meta viewport after page load.

There’s also the main research page for the meta viewport, which gives a lot more details.

Selector iOS Android Chrome Opera BlackBerry Nokia UC NetFront Dolphin One Tizen IE Firefox
5 6 2 3 4 18 25 Mini Mob 12 Mob 14 6 7 PB 10 Xpress MeeGo Anna Belle 9 10
Basics

Sets the dimensions of the layout viewport.

Yes Yes Yes Almost Yes Yes Hardly Yes No Yes Yes
<meta name="viewport" content="width = 380">
<meta name="viewport" content="width = device-width">

Should narrow the layout viewport to the indicated width. The device-width should equal screen.width.

  • Chrome changes the size of the layout viewport, but does not zoom the page in or out.
  • Opera Mini supports the meta viewport. but chooses different values than other browsers on the same device.
  • Xpress uses a default width of 240px in my test, and doesn’t really change that with a meta viewport, although it sometimes extends the canvas. Assume it’s not supported.
Change immediately

Change the tag directly after it’s been written into the page

Test page
Yes Yes Yes Yes Yes Yes No Yes No Yes No
<meta id="testViewport" name="viewport" content="width = 380">
<script>
var mvp = document.getElementById('testViewport');
mvp.setAttribute('content','width=480');
</script>
  • See above for Chrome.
Selector iOS Android Chrome Opera BlackBerry Nokia UC NetFront Dolphin One Tizen IE Firefox
5 6 2 3 4 18 25 Mini Mob 12 Mob 14 6 7 PB 10 Xpress MeeGo Anna Belle 9 10
Change later

Change the tag once the page has been loaded

Test page
Yes Yes Yes No Yes No No Yes No Yes No Yes No
<meta id="testViewport" name="viewport" content="width = 380">
<script>
window.onload = function () {
	var mvp = document.getElementById('testViewport');
	mvp.setAttribute('content','width=580');
}
</script>
  • See above for Chrome.
Remove

Remove the tag entirely

Test page
No No No No Yes No No No No No
<meta id="testViewport" name="viewport" content="width = 380">
<script>
window.onload = function () {
	var mvp = document.getElementById('testViewport');
	mvp.removeAttribute('content');
}
</script>

I expect the page becomes as wide as the default layout viewport; i.e. behaves the same as if no meta viewport were set.

  • Supported from Android 4 on.

Tested browsers

Mobile browser test array 1.0.5; March 2013

iOS 5
WebKit 534
Default browser on iPad 2 with iOS 5.1.1
iOS 6
WebKit 536
Default browser on iPhone 4S with iOS 6.1.1
Android 2
WebKit 533
Default browser on HTC Legend, Android 2.2
Default browser on LG Optimus something, Android 2.2
Default browser on Sony Xperia S, Android 2.3.7
Android 3
WebKit 534
Default browser on Packard Bell tablet, Android 3.2.1
Android 4
WebKit 534
Default browser on HTC One X, Android 4.1.1
Default browser on Samsung Galaxy Note I, Android 4.0.3
Chrome 18
WebKit 535
On Nexus 7, Android 4.2.1
Chrome 25
WebKit 537
On Samsung Galaxy Note I, Android 4.0.3
Opera Mini
Presto
Proxy browser
7.5 on Samsung Galaxy Note I, Android 4.0.3
7.1 on BlackBerry 9800 (OS6)
7.1 on Nokia E71 (SymbianOS/9.2)
7.0.5 on iPad 2, iOS 5.1.1
Opera Mobile 12
Presto
12.10 on HTC One X, Android 4.1.1
12.00 on Nokia E7, Symbian Anna
Opera Mobile 14
WebKit 537
14.0 on Sony Xperia S, Android 2.3.7
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 (BB10). This device has 1GB of internal memory instead of the customary 2GB, which may matter in performance tests.
Xpress
Gecko
Proxy browser
2.3 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. And who knows? Ex-Nokia people have good operator contacts.
Anna
WebKit 533
Default browser 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 on Nokia PureView 808, Symbian Belle SP2
The most recent Symbian build.
UC
WebKit 533
UC 8.6.1 on Packard Bell tablet, Android 3.2.1.
The largest Chinese browser. I’m testing the full variant, not the proxy.
NetFront
WebKit 534
Default browser on Nintendo Wii U
NetFront, by the Japanese Access company, used to be big on proprietary Samsung and Sony Ericsson systems. It is now switching to WebKit from their own rendering engine, and to the gaming device and TV markets.
Dolphin
WebKit 534
Beta 1.3.1 on Samsung Galaxy Note I, Android 4.0.3.
Independent full browser for Android. The non-beta is a skin over the Android default browser. The beta uses their own WebKit port.
One
WebKit 534
3.5.2 on HTC One X, Android 4.1.1
Formerly QQ browser by the Chinese company TenCent. Domestic competitor of UC.
Tizen
WebKit 537
Default browser on Lunchbox prototype by Intel, Tizen 2.0.0a3
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.
IE10
Trident
Default browser on Nokia Lumia 820, Windows Phone 8.
Firefox
Gecko
19 on HTC One X, Android 4.1.1

General note on One and UC: the browsers I test are not particularly representative for the actual browsers that are used in the wild. Though some may be default browsers on Asian Android devices, most of them get their market share from being pre-installed on feature phones or game consoles.I’m working on getting more representative test devices.

Browsers by WebKit version:

533
Android 2
Anna
UC
534
iOS5
Android 3 and 4
BB 6 and 7
MeeGo
NetFront
Dolphin
One
535
Chrome 18
Belle
536
iOS6
BlackBerry PlayBook
537
Chrome 25
Opera Mobile 14
BlackBerry 10
Tizen