all articles

mobile browsers fires orientationchange/resize event differently

2015-07-01 @sunderls

iOS android firefox orientationchange resize js

desc

mobile browsers fires orientationchange / resize event differently

  1. android firefox fires no orientationchange event.
  2. android (firefox, default browser) fires no resize event if page is not scrollable(has not scroll position)
  3. iOS fires both event, but after iOS8, orientationchange event is fired after resize.

solution

  1. we listen to orientationchange & resize event, use a debounce to clear the difference and ordering problems.
  2. for android firefox, use media query event
  3. (maybe all browsers support media query event? I haven't tried that yet)

code

    var update = util.debounce(function(){
        // do updating work here
    }, 300);

    if (isAndroid && isFirefox){
        var mqOrientation = window.matchMedia("(orientation: portrait)");
        mqOrientation.addListener(update);
    } else {
        $(window).on('orientationchange resize',  update);
    }

related links

http://qiita.com/tomoyukilabs/items/05f5d886893f79c1a00b

about orientationchange & resize event

Test

we use following code to do our test

    var $log = $('#log');

    function log(event){
        var line = '<h3>[event:' + event + '] is fired:</h3>';
        line += '<p>now size is: ' + window.innerWidth + ' x ' + window.innerHeight + '<br>';
        line += 'now orientation is: ' + (window.matchMedia( "(orientation: portrait)" ).matches ? 'portrait' : 'landscape') + '</p>';
        $log.append(line);
    }

    $(window).on('load orientationchange resize', function(e){ log(e.type);});

test step:

load page -> rotate to landscape -> rotate back to portrait

following is the result(safari and default browser on Android)

iOS6.0

    [event:load] is fired
    now size is : 320 x 356
    now orientation is :portrait

    (rotate to landscape)

    [event:orientationchange] is fired
    now size is : 480 x 320
    now orientation is : landscape

    [event:resize] is fired
    now size is : 480 x 320
    now orientation is : landscape

    (rotate to portrait)

    [event:orientationchange] is fired
    now size is : 320 x 413
    now orientation is :portrait

    [event:resize] is fired
    now size is : 320 x 413
    now orientation is :portrait

iOS7.1

    [event:load] is fired
    now size is : 320 x 460
    now orientation is :portrait

    (rotate to landscape)

    [event:resize] is fired
    now size is : 568 x 320
    now orientation is : landscape

    [event:orientationchange] is fired
    now size is : 568 x 320
    now orientation is : landscape

    (rotate to portrait)

    [event:resize] is fired
    now size is : 320 x 460
    now orientation is :portrait

    [event:orientationchange] is fired
    now size is : 320 x 460
    now orientation is :portrait

iOS8.3

    result is same as iOS 7.1

Android 4.1.2

    [event:load] is fired
    now size is : 360 x 515
    now orientation is :portrait

    (rotate to landscape)

    [event:orientationchange] is fired
    now size is : 360 x 515
    now orientation is : portrait

    [event:resize] is fired
    now size is : 598 x 283
    now orientation is : landscape

    (rotate to portrait)

    [event:orientationchange] is fired
    now size is : 598 x 335
    now orientation is :landscape

    [event:resize] is fired
    now size is : 360 x 515
    now orientation is :portrait

conclusion: orientationchange & resize may be fired in different order on different OS, and it is not promised to get right orientation right in onOrientationChange.