The resize event on mobile

Test page.

Desktop table.

Here are the results of my research into the firing of the resize event in nine mobile browsers.

Executive summary

Resizing takes place all the time, but we have to distinguish between the visual viewport, the layout viewport, and the HTML element. All three may be resized by user actions. The question is whether their resizing triggers a resize event.

See this page for an explanation of the visual and layout viewports.

Layout viewport

The layout viewport’s dimensions are changed when the contents of the meta viewport tag are changed. This is an easy use case: all browsers that allow the meta viewport tag to be changed, fire a resize event when that happens.

Opera, Safari, Android, Dolfin, Palm, and MeeGo allow the change and fire the resize event. The other browsers do not allow the meta viewport tag to be changed.

HTML element

The HTML element’s dimensions are changed when extra content is added to the page that stretches up the element, or when a draggable layer is dragged beyond the edge of the HTML element.

Opera, Safari, Dolfin, MeeGo, and Firefox fire a resize event when that happens, except that Firefox (and maybe Opera) does not fire a resize event when the vertical dimensions of the HTML element change.

Android, BlackBerry, Symbian, and Palm do not fire a resize event when the HTML element’s dimensions are changed. As far as I’m concerned this is a bug.

Visual viewport

Changes to the visual viewport are a problem. I tested orientationchange, zoom, and showing and hiding the browser bar and the software keyboard. All these actions change the dimensions of the visual viewport.

The fundamental question is whether the resize event should fire at all. My current take is that it should.

Compatibility

Untestable means that the browser does not support the test case at all. For instance, Palm and Symbian don’t support the touch events, so I can’t drag a layer around to see if a resize event fires.

Opera note

My test page doesn’t work in my Opera Mobile 11.50, which is the most recent mobile build. (It does work in 11.60 on desktop.) Fortunately a reader’s Opera Mobile did work, and he gave me these screenshots to determine Opera’s score.

Property Opera Mobile Safari Android BlackBerry Dolfin Symbian Palm MeeGo Firefox
Presto WebKit Gecko
Visual viewport
Orientation change
 Yes Yes No Yes Yes

Here’s a use case nearly all browsers agree on.
Zoom
Pinch- or double-tap zoom 		Yes No Up to 2.3 Yes No No
  • Android 3.2 does not fire a resize event; 2.1 and 2.3 do
Browser bar
Scroll the browser toolbar into and out of view 		Yes No Up to 2.3 Yes No Untestable No
  • MeeGo and iPad do not remove the browser bar
  • Android 3.2 does not fire a resize event; 2.1 and 2.3 do
Keyboard
The software keyboard pops up 		Yes No Yes PB Almost Untestable Yes No
  • The BB Torch has a hardware keyboard. When it’s open the software keyboard doesn’t appear. Even when it’s closed and the software keyboard pops up, the event doesn't fire.
  • Dolfin Wave I fires the event only when the keyboard is removed, not when it appears.
  • Palm only has a hardware keyboard.
  • The Symbian keyboard takes the entire screen, and sort of overlays the browser.
Layout viewport
Meta viewport
Changing the meta viewport value 		Yes Yes Yes Untestable Yes Untestable Yes Untestable
Untestable
Browser does not change the meta viewport.
  • Android always jumps to the top of the page after a change. A resize event fires, but it could be that it’s caused by the browser toolbar coming into view.
    The exception is the Android tablet, which does not hide the toolbar. It fires a resize, and here I can be certain it’s in fact the meta viewport change that causes it.
HTML element
Grow vertically
Content is added to the page so that it grows 		Not sure Yes No Yes No Yes No
  • Dolfin 1 fires the resize event. TEST Dolfin 2.
Grow horizontally
An element is made very wide so that the page grows horizontally 		Yes Yes No Yes No Yes Yes
  • Android has a bug: the element never actually grows to the desired width. The HTML element does grow, though.
  • Dolfin 1 fires the resize event. TEST Dolfin 2.
Drag and drop
Drag an element just beyond the window border 		Yes Yes No Yes Untestable Yes Yes
  • Dolfin and MeeGo have complicated bugs. They fire the event correctly, though.
Other
Zoom settings
Changing the default text size in the settings 		Yes Untestable No Untestable Yes Untestable No
  • Safari has the setting in the Settings app (W? T? F?). Thus it’s not really testable: you have to leave and re-enter the Safari app.
  • Dolfin, Palm, and MeeGo don’t have a zoom setting at all.
Property Opera Mobile Safari Android BlackBerry Dolfin Symbian Palm MeeGo Firefox
Presto WebKit Gecko

I also tried to test whether some browsers fire the resize event before the load event. The browser probably starts with a generic width for an as-yet unknown new page, and may adjust the width of the layout viewport or the HTML element as meta viewports or very wide elements come in. They may do so, but according to my test page they don’t fire resize events.

Browsers

Opera Mobile
11.50 on Nexus One (Android 2.3) and Nokia N8 (Symbian pre-Anna).
Safari
On iOS 3.2 (iPhone 3G) and 5.0.1 (iPad 2)
Android
2.1 on HTC Legend, 2.3 on Nexus One and Sony Ericsson Neo, 3.2 on Packard Bell (Asus) tablet
BlackBerry
OS6 (Torch) and Tablet OS 1 (PlayBook)
Dolfin
On Samsung Wave I and Wave II
Symbian
Nokia N8 pre-Anna
Palm
2.1 on Pre 2
MeeGo
Harmattan 1.2 on Nokia N950
Firefox
8.0 (yes really!) on Nexus One (Android 2.3)