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 WebView Chromium Chromium WebView UC 10 BlackBerry 10 UC Mini Opera Mini Nintendo Dolphin IE Firefox
8 9 8 9 LG Cy HTC S34 Ub S38 Xia S44 Op Go 30 33 45 47 48 10 11
Meta viewport change
Does the event fire when the content of the meta viewport is changed?
(Layout viewport)
No Yes No Yes ? Yes Untestable Yes No No 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 Yes No No Yes No No No Yes 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 No Yes No ? Yes No Yes No Yes ? Yes Untestable Yes ? No ? No ? Yes
Keyboard
Does the event fire when the software keyboard is opened or closed?
(Visual viewport)
No No Yes Mostly Yes Yes Yes Sometimes Yes No Yes Yes No Yes
  • Android 4: the HTC does not fire the event. The others do.
  • UC: the one on S4 supports it; the one on Xiaomi doesn’t.
iOS iOS WebView And. 4 AWK WebView Chromium Chromium WebView UC 10 BlackBerry 10 UC Mini Opera Mini Nintendo Dolphin IE Firefox
8 9 8 9 LG Cy HTC S34 Ub S38 Xia S44 Op Go 30 33 45 47 48 10 11

Tested browsers

Mobile browser test array 3.0; January/March 2016

iOS 8
WebKit 600
Default browser on iPhone 4S with iOS 8.3
iOS 9
WebKit 601
Default browser on iPad 2 with iOS 9.2.1
iOS 8 WebView
WebKit 600
Chrome/iOS on iPhone 4S with iOS 8.3
iOS 9 WebView
WebKit 601
Chrome/iOS on iPad 2 with iOS 9.2.1
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 Dolphin 33
Blink; Chromium 33
Dolphin 11.5.3 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.
Chromium HTC 34
Blink; Chromium 33
Default browser on HTC M8, Android 6.0
Chromium Samsung 34
Blink; Chromium 34
Default browser on Samsung Galaxy S4, Android 5.0.1
Chromium Ubuntu 35
Blink; Chromium 35
Default browser on Ubuntu Phone 15.04
Chromium Samsung 38
Blink; Chromium 38
Default browser on Samsung Galaxy S6, Android 5.1.1
Chromium Xiaomi 42
Blink; Chromium 42
Default browser on Xiaomi M2, Android 5.0.2
Chromium Samsung 44
Blink; Chromium 38
Internet Beta on Samsung Galaxy S6, Android 5.1.1
Chromium Opera 47
Blink; Chromium 47
34 on LG L5, Android 4.1.2
34 on Wolfgang AT-AS45FW, Android 4.2.2
This is Opera Mobile.
Chromium Google 48
Blink; Chromium 48
Default browser on Nexus 7, Android 5.1
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
All these WebViews were tested with the HTML5Test Android app.
Chromium WebView 45
Blink; Chromium 45
WebView on HTC M8, Android 6.0
WebView on Xiaomi M2, Android 5.0.2
Chromium WebView 47
Blink; Chromium 47
WebView on Samsung Galaxy S4, Android 4.4.2
All these WebViews were tested with the HTM§Test Android app.
Chromium WebView 48
Blink; Chromium 48
WebView on Nexus 7, Android 5.1
WebView on Motorola Moto G, Android 5.1
WebView on Samsung Galaxy S6, Android 5.1.1
All these WebViews were tested with the HTML5Test Android app.
UC 10
WebKit 534
UC 10.9 on Xiaomi M2, Android 5.0.2
UC 10.8 on Samsung Galaxy S4, Android 5.0.1
The one on the S4 is an English install. I don’t know if that matters, but it could.
BlackBerry 10
WebKit 537
Default browser on BlackBerry Z30 (BB OS 10.3.2)
UC Mini
Gecko; don’t know version number
Proxy browser
10.1 on Wolfgang AT-AS45FW, Android 4.2.2 (see note below)
Opera Mini
Presto
Proxy browser
13 on iPad 2, iOS 9.2.1
15 on Samsung Galaxy S4, Android 5.0.1
Nintendo
WebKit 536
CHECK: Nintendo browser 3.0.3 on Wii U (OS version unfindable)
Supposed to be based on NetFront, which in turn is WebKit-based nowadays.
IE10
Trident
Default browser on Nokia Lumia 520, Windows Phone 8.0.
IE11
Trident
Default browser on Nokia Lumia 820, Windows Phone 8.1 “Update”
This is a developer phone. That might matter.

Firefox Android
Gecko 43
43 on LG L5, Android 4.1.2
43 on Samsung Galaxy S4, Android 5.0.1

Wolfgang AT-AS45FW note: Wolfgang is a Dutch importer and re-brander of phones. In this particular case they seem to have bought Chinese (? probably) phones, re-branded them, then re-sold them to the Whoop company, which re-branded them and sold them to the Hema chain of supermarkets, which sells them to consumers as the Whoop Echo. Supply chain management FTW!

2013 results

I will keep my 2013 table around for historical information about the resize event.

A dash means that the browser doesn’t support the action in the first place; making the resize event untestable. For instance, BlackBerry up to 10 does not support changing the meta viewport with JavaScript.

Selector iOS Android Chrome Opera BlackBerry Nokia UC Puffin Nintendo Dolphin Tizen One IE Firefox
6 7 2 4 18 30 Mini Mob 12 Mob 16 6 7 PB 10 Xpress MeeGo Anna Belle Mini 8 9 9 10 OS And
Meta viewport change
Does the event fire when the content of the meta viewport is changed?
(Layout viewport)
Yes Yes No Yes No - Yes No Yes No Yes No Yes Yes No Yes No - -
Orientation change
Does the event fire when you change the device orientation?
(Layout and visual viewports)
Yes Yes Yes No Sometimes Yes Yes No - Yes No Yes Yes - Yes No Yes Yes
  • Opera 12 on Android fires a resize event; on Symbian doesn’t.
Zoom
Does the event fire when you zoom?
(Visual viewport)
No Yes No No No Sometimes No Yes No Out No Yes No Yes No No In No
  • Opera 12 on Android fires a resize event; on Symbian doesn’t.
  • Symbian Belle fires the event when zooming out, but not when zooming in.
  • 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)
No Yes Minimal - Yes No Yes Yes - No - No No Yes No - No - Yes - Yes No
  • Android 4: only on the Xiaomi. The five others do not fire the event.
  • Chrome 18 never hides the toolbar.
  • Most BlackBerrys don’t hide the toolbar.
Keyboard
Does the event fire when the software keyboard is opened or closed?
(Visual viewport)
No Buggy Depends Yes No Yes Yes No Yes No No No Yes No No Yes Yes
  • Android WebKit 2 fires the event only occasionally when the keyboard is shown or hidden.
  • Android 4: the HTC and the Xiaomi do not fire the event. The four others do.
HTML element grows vertically
Does the event fire when content is added to the page?
(HTML element)
Yes No No No No No No Yes No No No No
HTML element grows horizontally
Does the event fire when an element grows to be very wide?
(HTML element)
Yes No No No No No No No No No No
Drag and drop
Does the event fire when an element is dragged off-screen on the right?
(HTML element)
Yes No No No No Yes No No - No No - No - No Yes No - No
Selector iOS Android Chrome Opera BlackBerry Nokia UC Puffin Nintendo Dolphin Tizen One IE Firefox
6 7 2 4 18 30 Mini Mob 12 Mob 16 6 7 PB 10 Xpress MeeGo Anna Belle Mini 8 9 9 10 OS And

Tested browsers

Mobile browser test array 1.2; November 2013

iOS 6
WebKit 536
Default browser on iPhone 4S with iOS 6.1.3
iOS 7
WebKit 537
Default browser on iPad 2 with iOS 7.0.3
Android 2
WebKit 533
Default browser on HTC Legend, Android 2.2
Default browser on LG Optimus something, Android 2.2
Default browser on Samsung Galaxy Pocket, Android 2.3.6
Android 4
WebKit 534
Default browser on Samsung Galaxy Note I, Android 4.0.3
Default browser on Sony Xperia S, Android 4.1.2
Default browser on Xiaomi M2, Android 4.1.1
Default browser on Huawei C8813, Android 4.1.1
Default browser on Samsung Galaxy S3, Android 4.1.2
Default browser on HTC One X, Android 4.2.2
Chrome 18
WebKit 535
Default browser on Samsung Galaxy S4, Android 4.2.2
On Sony Xperia S, Android 4.1.2. This is a downloaded version from Google
It will be interesting to see if Samsung’s purported Chrome 18 is really the real Chrome 18.
Chrome 30
Blink (Chromium 30)
On HTC One X, Android 4.2.2
On Nexus 7, Android 4.3
Opera Mini
Presto
Proxy browser
7.0.5 on iPad 2, iOS 7.0.3
7.1 on BlackBerry 9800 (OS6)
7.1 on Nokia PureView 808, Symbian Belle
7.5 on Samsung Galaxy Note I, Android 4.0.3
Opera Mobile 12
Presto
12.00 on Nokia E7, Symbian Anna
12.10 on Samsung Galaxy Pocket, Android 2.3.6
Opera Mobile 16
Blink (Chromium 29)
On Sony Xperia S, Android 4.1.2
On Nexus 7, Android 4.3
BlackBerry 6
WebKit 534
Default browser on BB Torch 9800 (OS6)
BlackBerry 7
WebKit 534
Default browser on BB Torch 9810 (OS7)
BlackBerry PB
WebKit 536
Default browser on PlayBook with OS 2.1.0
BlackBerry 10
WebKit 537
Default browser on BlackBerry Z10 (BB OS 10.1)
This device has 1GB of internal memory instead of the customary 2GB, which may matter in performance tests.
Xpress
Gecko 20100401; this version was used for some Firefoxes from 3 to 4.
Proxy browser
3.7 on the Nokia Asha 311, S40.
This browser used to be called Ovi. Nokia developed it because it saw how succesful Opera was on Nokia’s own devices.
MeeGo
WebKit 534
Default browser on Nokia N950, MeeGo Harmattan 1.2
Originally slated as Symbian’s successor, MeeGo was ousted in favour of Windows Phone. Some devices were sold, however, and a Finnish company is trying to re-start MeeGo under the name Sailfish. Also, rumour has it that Nokia is quietly hiring back ex-MeeGo people, so a Nokia-based restart is not entirely impossible.
Anna
WebKit 533
Default browser (7.3) on Nokia E7, Symbian Anna
The next-to-last Symbian build. I don’t think it was the prime Symbian build for long; it was replaced by Belle fairly soon. But it’ll be in some people’s pockets.
Belle
WebKit 535
Default browser (8.3) on Nokia PureView 808, Symbian Belle FP2
The most recent Symbian build.
UC Mini
Doesn’t mention a rendering engine
Proxy browser
8.8 on HTC One X, Android 4.2.2
UC
WebKit 534
UC 8.5.1 on Xiaomi M2 (Android 4.1.1)
UC 9.2.3 on Huawei C8813 (Android 4.1.1)
The largest Chinese browser. This is the full variant, not the proxy. These browsers were pre-installed (next to Android WebKit; don’t ask me why).
Puffin
WebKit 534
2.1 Free Edition on Samsung Galaxy S4, Android 4.2.2
Claims to be Chrome 11
Nintendo
WebKit 536
Nintendo browser 2.0.0 on Wii U 4.0.0
Supposed to be based on NetFront.
Dolphin
WebKit 534
Beta 1.3.1 on Sony Xperia S, Android 4.1.2.
Independent full browser for Android. The non-beta is a skin over the Android default browser. The beta uses their own WebKit port.
QQ One
WebKit 533
4.2.2 on HTC One X, Android 4.2.2
This is the downloadable, international browser TenCent created.
Tizen
WebKit 537
Default browser on Ref.Device-PQ by Samsung; Tizen 2.2
Tizen is an OS jointly being developed by Samsung and Intel. I expect Samsung to start producing devices this year, and it will get a few percent of market share.
IE9
Trident
Default browser on Nokia Lumia 800, Windows Phone 7.5.
IE10
Trident
Default browser on Nokia Lumia 820, Windows Phone 8.0.
Firefox OS
Gecko 18
Geekphone/Telefónica (Peak and/or qcom); Boot2Gecko 1.0.1.0-prerelease
Firefox Android
Gecko 25
25 on HTC One X, Android 4.2.2

Browsers by WebKit version:

533
Android 2
Anna
UC
QQ 2.0
One
534
Android 3 and 4
BB 6 and 7
MeeGo
Puffin
Dolphin
535
Belle
Chrome 18
536
iOS6
BlackBerry PlayBook
NetFront
537
iOS7
BlackBerry 10
Tizen