Browser compatibility — viewports

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

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

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.

Properties IE8 IE9 IE10 FF 19 Win FF 19 Mac Safari 6.0.2 Mac Chrome 25 Win Chrome 25 Mac Yandex 1.5 Mac Opera 12.14 Win Opera 12.14 Mac
screen.width and screen.height

Screen resolution in device pixels (and not dips). Should not change when the browser is zoomed.

 CSS CSS Yes Yes Yes
CSS
width and height in CSS pixels instead of device pixels. (Less pixels when you zoom in.)
window.innerWidth and window.innerHeight

Dimensions of the viewport in CSS pixels, including the scrollbars.

 No Yes Yes Yes Yes Yes
documentElement. clientWidth and documentElement. clientHeight

Dimensions of the viewport in CSS pixels, excluding the scrollbars.

 Yes Yes Yes Yes Yes
documentElement. offsetWidth and documentElement. offsetHeight

Dimensions of the <html> element in CSS pixels.

 client+ client Yes Yes Yes Yes
client
Equal to clientWidth/Height
  • In IE8 offsetHeight a few pixels higher than clientHeight.
pageXOffset and pageYOffset

Scrolling offset of the page in CSS pixels.

 No Yes Yes Yes Yes Yes
devicePixelRatio

device pixels divided by dips

 No Incorrect Yes Yes Yes
  • In Firefox this is the ratio of device pixels vs. CSS pixels. So current screen.width (in CSS pixels) multiplied by devicePixelRatio gives the width of the screen in device pixels.

Mouse/touch coordinates

Test page.

Properties IE8 IE9 IE10 FF 19 Win FF 19 Mac Safari 6.0.2 Mac Chrome 25 Win Chrome 25 Mac Yandex 1.5 Mac Opera 12.14 Win Opera 12.14 Mac
clientX/Y

In CSS pixels, relative to the visual viewport

 Yes Yes Yes Yes Yes 
clientX/Y = pageX/Y - window.pageX/YOffset
pageX/Y

In CSS pixels, relative to the layout viewport

 No Yes Yes 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

 CSS Yes Yes Yes Yes CSS
CSS
In CSS pixels instead of device pixels.