Orientation change event implementation by jquery mobile in phone gap

Question

Could someone please let me know the right code for orientation change event by jquery mobile in phone gap? Where and how do I implement this orientationChange function?

Answer 1

I'm using this in my mobile templates, as the orientationchange event wasn't triggered on iOS 7 Safari:

    // ORIENTATION CHANGE TRICK
    var _orientation = window.matchMedia("(orientation: portrait)");
    _orientation.addListener(function(m) {
        if (m.matches) {
            // Changed to portrait
            $('html').removeClass('orientation-landscape').addClass('orientation-portrait');
        } else {
            // Changed to landscape
            $('html').removeClass('orientation-portrait').addClass('orientation-landscape');
        }
    });
    //  (event is not triggered in some browsers)
    $(window).on('orientationchange', function(e) {
        if (e.orientation) {
            if (e.orientation == 'portrait') {
                $('html').removeClass('orientation-landscape').addClass('orientation-portrait');
            } else if (e.orientation == 'landscape') {
                $('html').removeClass('orientation-portrait').addClass('orientation-landscape');
            }
        }
    }).trigger('orientationchange');
    // END TRICK