事件檢測方向（景觀和potrait模式）爲「三星galaxy android 2.3.5」

我想爲景觀和肖像模式顯示不同的頁面設計。事件檢測方向（景觀和potrait模式）爲「三星galaxy android 2.3.5」

我想要一個事件，每當用戶將手機從「景觀人像改爲肖像」和「肖像改爲景觀」時都會觸發，並且頁面顯示兩種模式的不同設計。

此外，在我的代碼中，每次顯示景觀設計時都無法檢測到縱向模式。即使在縱向模式下運行頁面時也是如此。

對於以下移動設備：

設備：三星Galaxy，

OS版本：的Android 2.3.5。

在此我使用：

jQuery Mobile的版本： 1.1.0。，

jQuery的版本： 1.7.1

我的代碼是爲「iPhone，iPad和HTC的Android手機」，但是當我在「三星Galaxy」測試此則顯示landscap運行良好頁面設計的景觀和肖像模式。

我的代碼是：'

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

任何一個能幫助我嗎？

在此先感謝...

來源

2012-06-10 user1045389

嘗試給window.resize事件處理setTimeout：

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

這就是我做了我的Droid X的我自己window.resize事件處理程序運行Android 2.3 0.4。

來源

2012-06-10 17:51:46 Jasper

我試過這個但它不工作，總是顯示景觀設計。 – user1045389

@ user1045389我只注意到你綁定了兩次'window.resize'事件。爲什麼？ – Jasper

我已經添加了兩個桌面PC的調整大小和另一個移動列表。 – user1045389

事件檢測方向（景觀和potrait模式）爲「三星galaxy android 2.3.5」

回答

相關問題