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 nine 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 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 or the device changes orientation.

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

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.

In general, browsers do not support the resize event in these circumstances. The HTML element is not a viewport, after all.

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 do not support the resize event in these circumstances, though there are a few exceptions.

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
Layout viewport
Is the resize event fires when the layout viewport is resized?
Yes Yes No Yes No inc Yes No Yes inc Yes No Yes Yes No Yes inc No Yes Yes
inc
Incomplete: succeeds on some tests; fails on others
Visual viewport
Is the resize event fires when the visual viewport is resized?
No Yes No inc No inc Yes No inc No inc No inc No inc No Yes inc
inc
Incomplete: succeeds on some tests; fails on others
HTML element
Is the resize event fires when the HTML element is resized?
Yes No No No No inc No No inc No No inc No No No
inc
Incomplete: succeeds on some tests; fails on others

Full results

Here are the full test results that the previous table was a summary of.

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