Javascript在方向改变后获取手机屏幕宽度答案

【问题标题】：Javascript get mobile screen width after orientation changeJavascript在方向改变后获取手机屏幕宽度
【发布时间】：2012-11-02 17:19:33
【问题描述】：

我正在像这样捕获orientationchange 事件：

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

            });

orientationchage 之后如何获取新的屏幕宽度和高度（以像素为单位）？

我试过screen.width，但这并没有改变，它仍然是初始宽度，即使在方向改变之后。

【问题讨论】：

你看到推荐here了吗？

标签： javascript jquery mobile jquery-mobile screen-orientation

【解决方案1】：

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

【讨论】：

我不确定这是否会更快，但可以选择：width = Math.abs(window.orientation) == 90 ? screen.height : screen.width; 至少可以节省分配变量和对同一个变量。（但是在我第一次看到问题 - 在移动设备上 - 和评论之间切换到三元组时 +1。）
@DavidThomas 这是一个微优化。我添加ori 变量的唯一原因是防止行太长。

【解决方案2】：

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

【讨论】：

【解决方案3】：

使用$(window).resize，它在orientationchange之后运行

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

【讨论】：

我投了这个答案，因为以前的答案是使用以前的宽度和高度（旋转之前的那些，我认为该事件是在移动设备旋转后立即触发的，而窗口大小（宽度）仍然相同一）。 $(window).resize 在旋转完成后触发。

【解决方案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);

【讨论】：