用于检测“三星银河Android 2.3.5”的方向（横向和纵向模式）的事件

Question

I want to show different page design for landscape and portrait mode.

I want an event which fire every time when user change the mobile from "landscape to portrait" and "portrait to landscape" and page show different design for both the mode.

Also in my code each time show the landscape design it is not able to detect the portrait mode.Even when I am running the page in portrait mode.

For following mobile device:

Device : Samsung Galaxy ,

Os version: Android 2.3.5.

In this I am using:

Jquery mobile version: 1.1.0. ,

Jquery version: 1.7.1

My code is running well for "iphone,ipad and htc android mobile" but when I am test this in "Samsung Galaxy" then it is showing landscape page design for both the landscape and portrait mode.

My code is:

 $(document).ready(function () {
    $("#pagecontent.ui-content").css({ 'padding': '0px', 'margin': '0px' });
    checkClientTimeZone();

    position = $.event.special.orientationchange.orientation();
    pagecontentChanges();

    //        $(window).bind("orientationchange", pagecontentChanges);

});
$.event.special.orientationchange.orientation = get_orientation = function () {
    var elem = document.documentElement;
    //alert(elem && elem.clientWidth / elem.clientHeight < 1.1 ? "portrait" :       "landscape");
    return elem && elem.clientWidth / elem.clientHeight < 1.1 ? "portrait" : "landscape";
};
window.addEventListener("orientationchange", function () {
    setTimeout(function () {
        position = $.event.special.orientationchange.orientation();
        pagecontentChanges();
    }, 500);
}, false);
window.addEventListener("resize", function () {
    setTimeout(function () {
        position = $.event.special.orientationchange.orientation();
        pagecontentChanges();
    }, 500);
}, false);


function pagecontentChanges() {

    if (position == "portrait") {
        $("#headertext").css({ "text-align": "center", "margin-top": "-2.6em" });
        $("#login_content").removeClass("landscap_logincontent");
        $("#registerdiv").removeClass("landscap_divwhite");
        $("#tylenol").css({ "width": "100%", "float": "", "margin-right": "0px" });
        $("#button_div .ui-btn").css(" margin-top", ".5em");
        $("#loginbluelink").css("text-align", "center");
        $("#redromantext").css("text-align", "center");
        $('#registerdiv').css({ "float": "" });
        $("#registertext").css({ "margin-top": "0px" });
        $(".divwhite").css({ "width": "60%" });

        $("#loginheader").attr("src", "@img_css_scpt/test_mobile/images/logon_header.png");

    }
    if (position == "landscape") {
        $("#headertext").css({ "text-align": "left", "padding-left": "5%", "margin-top": "1em" });
        $("#login_content").addClass("landscap_logincontent");
        $("#registerdiv").addClass("landscap_divwhite");
        $("#tylenol").css({ "width": "55%", "float": "left", "margin-right": ".5em" });
        $("#button_div .ui-btn").css(" margin-top", "0px");
        $("#loginbluelink").css("text-align", "left");
        $("#redromantext").css("text-align", "left");
        $("#registertext").css({ "margin-top": "5px" });
        $(".divwhite").css({ "width": "71%" });

        $("#loginheader").attr("src", "@img_css_scpt/test_mobile/images/landscap_header_logon.png");
    }
}

Answer 1

Try giving the window.resize event handler a setTimeout :

$(window).bind("resize", function () {
    setTimeout(function () {
        position = $.event.special.orientationchange.orientation();
        pagecontentChanges();
    }, 500);
});

That's what I did for my own window.resize event handlers for my Droid X that runs Android 2.3.4.