Question

我正在捕捉这样的orientationchange事件：

            $(window).bind( 'orientationchange', function(e){

            });

如何在orientationchage？

之后获得新的屏幕宽度和高度（以像素为单位）

我已尝试过screen.width，但这不会改变，即使在方向改变后，它仍然是初始宽度。

Answer 1

$(window).bind( 'orientationchange', function(e){
    var ori = window.orientation,
        width = (ori==90 || ori==-90) ? screen.height : screen.width;
});

Answer 2

您也可以使用screen.availWidth。它会随着方向而改变。

Answer 3

使用 $（窗口）.resize ，它会在 orientationchange 之后运行

$(window).resize(function(){
        //your logic
});

Answer 4

如果您正在使用元标记视口，您还可以更新该标记（使用jquery示例：）

        function adapt_to_orientation() {
        var ori = window.orientation;
        var screenwidth = (ori==90 || ori==-90) ? screen.height : screen.width;
        var screenheight = (ori==90 || ori==-90) ? screen.width : screen.height;
                  // resize meta viewport
                  $('meta[name=viewport]').attr('content', 'initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width='+screenwidth + ',height=' + screenheight);
                }   
        adapt_to_orientation();
        $(window).bind( 'orientationchange', adapt_to_orientation);

Javascript在方向更改后获得移动屏幕宽度

4 个答案: