Browser compatibility — viewports

Related files:

Last major update on 19 March 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.

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

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.
dips
Device-independent pixels. An abstract layer of pixels mostly used for high-dpi screens where the meta viewport causes a width that’s not equal to the number of device pixels. See here for some more information.
For instance, on the iPhone 4G the number of device pixels is 640 pixels, but the meta viewport tag causes a 320px-wide site. 320 is the number of dips.
Device pixel ratio
The ratio of device pixels and dips. In the iPhone 4G example the device pixel ratio would be 640 / 320 = 2.
See this and this blog post for more information.
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.

Viewport properties

This table looks into the properties that are necessary to read out useful information about the two viewports. As you can see, a few browsers make a mess of them, but most suport them well.

Test page.

UC behaviour is undescribable. Very, very bad. Layout viewport changes with zoom, meta viewport not supported meaningfully, most of the other measurements don’t make any kind of sense.

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

Screen resolution in device pixels (and not dips). Should change when the orientation of the device is changed.

 dips no-or 800 Yes Avail dips Avail dips Avail dips no-or Yes Incorrect Buggy Yes Buggy Yes no-or Yes
avail
Available width/height instead of full width/height. The Opera toolbars take about 50px vertically.
dips
Browser uses dips instead of device pixels.
layout
Equal to layout viewport
no-or
The browser ignores orientation changes
visual
Equal to the visual viewport.
  • Safari uses dips, not device pixels, and always gives portrait measurements, even when orientation is landscape.
  • Android 2 WebKit always has a width of 800px.
  • Chrome 18 on Nexus 7 gives the available height, minus the toolbars.
  • Chrome 25 on Samsung Galaxy note gives the dips size.
  • Opera Mini may not do it exactly right, but at least the Mini server now knows something about the device display. That’s progress.
  • Xpress gives 1280x1024, which is totally wrong. The Xpress server knows nothing about the device display.
  • MeeGo changes the screen width/height if you go to a page with a meta viewport.
  • IE always gives portrait measurements, even when orientation is landscape.
window.innerWidth and window.innerHeight

Dimensions of the visual viewport in CSS pixels.

 Yes Layout Yes Yes Buggy Yes Yes Not sure Yes Layout Yes Layout Yes Layout
layout
Equal to layout viewport
  • Opera Mini always gives a height of 10, and a width equal to the (buggy) layout viewport when not zoomed; 10 when zoomed.
  • Xpress gives the correct dimensions, but I cannot zoom the test page and thus I can’t do the complete test.
  • UC hides the visual viewport dimensions in window.outerWidth/Height.
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
documentElement. clientWidth and documentElement. clientHeight

Dimensions of the layout viewport in CSS pixels.

 Yes Yes Yes Buggy Yes Yes Not sure Yes Buggy Yes Yes
  • I don’t understand the Opera Mini values.
  • The UC layout viewport changes with zooming.
Calculate zoom level

Zoom level can only be calculated if the previous two entries have a Yes.

 Yes No Yes Yes No Yes Yes No Yes No Yes No Yes No 
zoom level = document.documentElement.clientWidth / window.innerWidth
documentElement. offsetWidth and documentElement. offsetHeight

Dimensions of the <html> element in CSS pixels.

 Yes Yes Yes Buggy Yes Yes Yes Yes Yes Layout Yes
  • I don’t understand the Opera Mini values.
pageXOffset and pageYOffset

Scrolling offset of the page in CSS pixels.

 Yes Yes Yes 0 Yes Yes 0 Yes Buggy Yes Yes
devicePixelRatio

device pixels divided by dips

 Yes Yes Yes 1 Yes Yes No Buggy Yes Buggy Yes 1 Yes 1 No 1
  • MeeGo changes it from 1 to 1.5 if you go to a page with a meta viewport.
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

Mouse/touch coordinates

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

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