检测“samsung galaxy Android 2.3.5”的方向（横向和纵向模式）的事件

Posted 2023-03-31

【中文标题】检测“samsung galaxy Android 2.3.5”的方向（横向和纵向模式）的事件

【英文标题】：Event to detect orientation (landscape and portrait mode) for "samsung galaxy Android 2.3.5"

【发布时间】：2012-06-10 17:41:57

【问题描述】：

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

我希望每次当用户将手机从“横向到纵向”和“纵向到横向”切换时触发一个事件，并且页面显示两种模式的不同设计。

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

对于以下移动设备：

设备：三星 Galaxy，

操作系统版本： android 2.3.5。

我正在使用：

Jquery 移动版： 1.1.0。 ,

jQuery 版本： 1.7.1

我的代码在 "iphone、ipad 和 htc android mobile" 上运行良好，但是当我在 "Samsung 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");
    

【参考方案1】：

尝试为window.resize 事件处理程序提供setTimeout：

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

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

【讨论】：

我试过了，但它不起作用，总是显示景观设计。

@user1045389 我刚刚注意到您绑定到window.resize 事件两次。为什么？

我添加了两个调整大小，一个用于台式电脑，另一个用于移动设备的侦听器。

您好，我已经通过上面的代码更改了我已编辑但不适用于 android 的代码