The resize event on mobile

Back to the index.

Test page.

Desktop table.

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

The resize event fires when a viewport is resized. But which viewport? Browsers generally support the resizing of the layout viewport, but it seems visual viewport resize support is on the way out.

Summary

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

See this page for a visualisation 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 or the device changes orientation.

In general, the event fires in these circumstances. Browsers seem to agree that this is a true resize.

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.

In general browsers agree that incoming or exiting toolbars cause a resize, but zooming does not. Why not? I have no clue. We need an event that fires when the user zooms.

Results

Here are the full test results.

Untestable or ?: The browser or device does not support the action involved. For instance, some browsers have fixed toolbars, which makes it both pointless and impossible to run the toolbar test.

I use the HTML5 Test Android app for WebView tests. It has a fixed toolbar that never disappears, and if you change the device orientation it resets to the default page. Thus I could not test these effects in WebViews.

Even more oddly, although full browsers generally support the changing of the meta viewport in JavaScript, all Android WebViews refuse to do so.

[an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive]
Meta viewport change
Does the event fire when the content of the meta viewport is changed?
(Layout viewport) 		No No Yes ? Yes Untestable Yes No No No Yes Yes
Orientation change
Does the event fire when you change the device orientation?
(Layout and visual viewports) 		Yes Yes Yes ? Yes Untestable Yes No Yes Yes
Zoom
Does the event fire when you zoom?
(Visual viewport) 		No No No Yes No No No No Yes No

General note: Note: you may get a resize event when zooming in or out, but that’s because of a toolbar change, and not because of the actual zooming.

  • IE10 fires the event when zooming in, but not when zooming out.
Toolbar
Does the event fire when the toolbar scrolls into or out of view?
(Visual viewport) 		Yes Yes No ? Yes No Yes No Yes Untestable Yes ? No No ? Yes
Keyboard
Does the event fire when the software keyboard is opened or closed?
(Visual viewport) 		No Yes No Mostly Yes Yes Yes Yes No No Yes Yes
  • Android 4: the HTC does not fire the event. The others do.

Tested browsers

[an error occurred while processing this directive]