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.

iOS iOS WebView And. 4 AWK Web­View Chromium Chromium WebView UC 11 Black­Berry 10 Dol­phin Opera Mini IE 11 Edge 14 Fire­fox 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 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.
iOS iOS WebView And. 4 AWK Web­View Chromium Chromium WebView UC 11 Black­Berry 10 Dol­phin Opera Mini IE 11 Edge 14 Fire­fox 50
9 10 9 10 LG Cy HTC S34 MM S44 Xia S51 Go 30 33 39 45 54 11 21

Tested browsers

Mobile browser test array 3.3; February 2017

iOS 9
WebKit 601
Default browser on iPhone 4S with iOS 9.3.5
iOS 10
WebKit 601
Default browser on iPad Air 2 with iOS 10.0.2
iOS 9 WebView
WebKit 602
Chrome/iOS on iPhone 4S with iOS 9.3.5
iOS 10 WebView
WebKit 602
Chrome/iOS on iPad Air 2 with iOS 10.0.2
Android WebKit 4
WebKit 534
Default browser on Huawei C8813, Android 4.1.1
Default browser on Samsung Galaxy Note I, Android 4.1.2
Default browser on Sony Xperia S, Android 4.1.2
Default browser on LG L5, Android 4.1.2
Default browser on Wolfgang AT-AS45FW, Android 4.2.2 (see note below)
Default browser on HTC One X, Android 4.2.2
Android 4 WebView
WebKit 534
WebView on Samsung Galaxy Note I, Android 4.1.2
WebView on Sony Xperia S, Android 4.1.2
WebView on HTC One X, Android 4.2.2
WebView on Wolfgang AT-AS45FW, Android 4.2.2 (see note below)
All these WebViews were tested with the HTML5Test Android app.
Chromium LG 30
Blink; Chromium 30
Default browser on LG L70, Android 4.4.2
Chromium Cyanogen 33
Blink; Chromium 33
Default browser on Galaxy Nexus flashed with Cyanogenmod 11, Android 4.4.4
Chromium HTC 33
Blink; Chromium 33
Default browser on HTC M8, Android 6.0
Chromium Samsung 34
Blink; Chromium 34
Samsung Internet 2.1 on Samsung Galaxy S4, Android 5.0.1
Chromium Micromax 39
Blink; Chromium 39
Default browser on Micromax Canvas Nitro 3 Android 5.1
Chromium Samsung 44
Blink; Chromium 38
Samsung Internet 4.0 on Samsung Galaxy S6, Android 6.0.1
Chromium Xiaomi 46
Blink; Chromium 46
Miui browser 8.2 on Xiaomi M2, Android 5.0.2
Chromium Samsung 51
Blink; Chromium 52
Samsung Internet 5.0 on Samsung Galaxy S7
Chromium Google 56
Blink; Chromium 56
Default browser on Motorola Moto G, Android 5.1
This is Google’s regular Chrome. I test it only on devices where it is the default browser.
Chromium WebView 30
Blink; Chromium 30
WebView on LG L70, Android 4.4.2
All these WebViews were tested with the HTML5Test Android app.
Chromium WebView 33
Blink; Chromium 33
WebView on Galaxy Nexus flashed with Cyanogenmod 11, Android 4.4.4
Chromium WebView 39
Blink; Chromium 39
WebView on Micromax Canvas Nitro 3 Android 5.1
Chromium WebView 45
Blink; Chromium 45
WebView on HTC M8, Android 6.0
Chromium WebView 54
Blink; Chromium 54
WebView on Samsung Galaxy S6, Android 6.0.1
All these WebViews were tested with the HTML5Test Android app.
UC 11
WebKit 534
UC 11.0.5 on Samsung Galaxy S6, Android 6.0.1
BlackBerry 10
WebKit 537
Default browser on BlackBerry Z30 (BB OS 10.3.2)
Dolphin
Probably WebKit 537
Dolphin 11.5.7 with JetPack on Samsung Galaxy S4, Android 5.0.1
Independent full browser for Android, as long as you install both Dolphin and the Jetpack extension.
It claims to be a Chromium 33, but it lies. (Evidence: it does not support the pointer media query, while Chromium 33 does.)
Opera Mini 11
Presto
Proxy browser
11 on Intex Agua Super, Android 5.1. It is the default browser on this device; that’s why included this old version
Opera Mini 21
Presto
Proxy browser
21 on Motorola Moto G, Android 5.1
IE11
Trident
Default browser on Nokia Lumia 820, Windows Phone 8.1 “Update”
This is a developer phone. That might matter.

Edge 14
Edge
Default browser on Nokia Lumia 830, Windows 10 Mobile
Firefox Android
Gecko 50
50 on Motorola Moto G, Android 5.1