I'm writing a CSS book

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

contact

The resize event on touchscreen

Yesterday I retested the resize event on touchscreen devices. Where the 2013 tests mostly showed a chaotic jumble, right now it’s becoming more clear where the resize event is heading.

The resize event fires when the user resizes a viewport. But which viewport? Touchscreen devices have two: the layout and the visual viewport. (See also this page for a visualisation.)

Most browsers fire the resize event whenever the layout viewport is resized, though Safari and IE don’t when the meta viewport tag is rewritten.

When it comes to the visual viewport, opinions are more divided. Nearly all browsers fire the event when a toolbar scrolls into our out of view, and most browsers but Safari and IE11 when a keyboard opens or closes.

The most important use case is mostly unsupported, though: zooming. When the user zooms the visual viewport is resized, but only BlackBerry, IE, and a bunch of WebViews fire the resize evemt. As far as I’m concerned this is a serious error: we need an event that tells us when the user zooms, and using the resize event for that makes sense, but apparently browsers disagree.

Anyway, the table will help me create good feature detection scripts for a client, which was the point of this retest. I assume it’ll also help some of you.