jquery - 用于检测“三星银河Android 2.3.5”的方向(横向和纵向模式)的事件

我想为横向和纵向模式显示不同的页面设计。

我希望每次用户将移动设备从“横向更改为纵向”和“纵向更改为横向”并且页面针对两种模式显示不同的设计时都触发事件。

同样在我的代码中，每次显示横向设计时，它都无法检测到纵向模式，即使以纵向模式运行页面也是如此。

对于以下移动设备：

设备：三星Galaxy，

操作系统版本：Android 2.3.5。

在此我使用：

jQuery mobile版本：1.1.0。 ，

jQuery版本：1.7.1

我的代码在“ iphone，ipad和htc android mobile”上运行良好，但是当我在“三星Galaxy”中对其进行测试时，它将显示横向和纵向模式的横向页面设计。

我的代码是：

 $(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");
    }
}

最佳答案

尝试给window.resize事件处理程序赋予setTimeout：

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

这就是我为运行Android 2.3.4的Droid X为自己的window.resize事件处理程序所做的事情。

关于jquery - 用于检测“三星银河Android 2.3.5”的方向(横向和纵向模式)的事件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10970849/