I'm writing a CSS book

JavaScript archives Compatibility Thidrekssaga QuirksBlog Donations CSS book Politics Mobile About COH

contact

Mobile viewport update

In the past week I’ve done the viewport tests on the latest crop of devices, and things are definitely looking better. The visual viewport dimensions are now well-supported, and a consensus on position: fixed is in the making.

The visual viewport is the part of the site the user is currently seeing, and its dimensions are reported in window.innerWidth/Height. These properties also reflect zooming. Currently there are only five browsers that do not handle this correctly: Android 2, Palm, UC, Firefox, and IE9. Android 3+ and IE10 get it right.

As to position: fixed, it is supported correctly by Safari iOS6, Android 3+, Chrome, QQ, and Firefox. The question here is whether the fixed layer should be positioned relative to the visual or the layout viewport. The correct answer is the visual viewport, and in addition the fixed layer should take its width from the visual viewport, too. Most browsers that handle position: fixed incorrectly are positioning it relative to the layout viewport, and there are also quite a few zoom-related bugs.

screen.width/height, which should reflect the dimensions of the entire screen in device pixels, remains a mess. The other viewport properties are getting better all the time.

screenX/Y, which should reflect the touch coordinates in device pixels relative to the visual viewport, are also a mess. Few browsers handle this correctly; most make it equal to either clientX/Y or pageX/Y. Then again, you rarely need to know about the touch coordinates in device pixels relative to the visual viewport, so this is not a huge problem.

So all in all another step has been made towards browser compatibility in this tricky and important area. Once web developers discover that zoom-based layouts are the future they’ll at least have reliable information about the current user viewport and a useful implementation of position: fixed to work with.