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.
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.
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.
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.
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.
| iOS | iOS WebView | And. 4 | AWK WebView | Chromium | Chromium WebView | UC 11 | BlackBerry 10 | Dolphin | Opera Mini | IE 11 | Edge 14 | Firefox 50 | |||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 9 | 10 | 9 | 10 | LG | Cy | HTC | S34 | MM | S44 | Xia | S51 | Go | 30 | 33 | 39 | 45 | 54 | 11 | 21 | ||||||||||
|
Meta viewport change
Does the event fire when the content of the meta viewport is changed?
(Layout viewport) |
No | No | Yes | ? | Yes | Untest |
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 | Untest |
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.
|
|||||||||||||||||||||||||||||
|
Toolbar
Does the event fire when the toolbar scrolls into or out of view?
(Visual viewport) |
Yes | Yes | No | ? | Yes | No | Yes | No | Yes | Untest |
Yes | ? | No | No | ? | Yes | |||||||||||||
|
Keyboard
Does the event fire when the software keyboard is opened or closed?
(Visual viewport) |
No | Yes | No | Most |
Yes | Yes | Yes | Yes | No | No | Yes | Yes | |||||||||||||||||
|
|||||||||||||||||||||||||||||
| iOS | iOS WebView | And. 4 | AWK WebView | Chromium | Chromium WebView | UC 11 | BlackBerry 10 | Dolphin | Opera Mini | IE 11 | Edge 14 | Firefox 50 | |||||||||||||||||
| 9 | 10 | 9 | 10 | LG | Cy | HTC | S34 | MM | S44 | Xia | S51 | Go | 30 | 33 | 39 | 45 | 54 | 11 | 21 | ||||||||||
Mobile browser test array 3.3; February 2017