JavaScript如何在屏幕方向变化后获取移动设备的屏幕宽度？

Question

我正在这样捕获orientationchange事件:

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

            });

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

我尝试过使用screen.width，但这不会改变，即使在方向更改后仍然保持最初的宽度。

- ServerBloke

---

你看过这里的建议吗？（https://dev59.com/Jmoy5IYBdhLWcg3wguSS） - barry

Answer 1

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

- Blazemonger

---

我不确定这样做会更快，但有一个选项：width = Math.abs(window.orientation) == 90 ? screen.height : screen.width; 这至少可以节省分配变量和对同一变量的双重评估。（但是在我第一次看到这个问题（在移动设备上）并发表评论之间，使用三元运算符+1。） - David Thomas

@DavidThomas 这是一种微小的优化。我添加 ori 变量的唯一原因是为了避免代码行过长。 - Blazemonger

Answer 2

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

- Sarim

Answer 3

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

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

- Alain Gauthier

---

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

Answer 4

如果您正在使用meta标签viewport，您也可以更新该标签（例如使用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);

- Air2