使用 javascript 检测 iPad 设备方向答案

【问题标题】：Detect iPad device orientation using javascript使用 javascript 检测 iPad 设备方向
【发布时间】：2015-10-12 14:13:55
【问题描述】：

我正在使用以下代码来检查 iPad 的方向。仅当我旋转设备或更改 iPad 的方向时才会调用此方法。如果以横向模式启动应用程序并且当我导航到此屏幕时，则不会调用以下方法。如何在不旋转 iPad 的情况下检测 iPad 的方向。

$(window).bind('orientationchange', function (event) {
    if (event.orientation == "landscape") {
        set frame for landscape
    } else {
        set frame for portrait
    }
});

【问题讨论】：

使用trigger。这将触发事件并使处理程序运行。 $(window).trigger('orientationchange');
window.innerHeight > window.innerWidth; 似乎是一个简单的解决方案？
查看这个答案stackoverflow.com/questions/4917664/…
顺便说一句，你错过了bind中的)

标签： javascript ipad orientation

【解决方案1】：

这应该也可以：

$(window).bind('orientationchange', function(event) {
  alert('new orientation:' + event.orientation);
});

【讨论】：

【解决方案2】：

$(window).on('load orientationchange', function(event) {
    if(event.orientation == "landscape")
    {
        set frame for landscape
    }
    else
    {
        set frame for portrait
    }
});

同时添加load 事件。如果在触发window.load 时，有问题的 screen 在 DOM 中可用，这将有所帮助。否则trigger screen 之后的事件被动态注入到 DOM（如@Tushar 所建议的那样）。

请记住，orientation change 或 resize 事件不会最初在页面加载时触发，如果您想最初运行它们，您将还必须包括 load 事件。或者trigger他们稍后，如果它依赖于 DOM 的动态部分。

【讨论】：

将最后一个 } 替换为 );

【解决方案3】：

这将检查 iPad 是否存在，然后将高度与宽度进行比较。

var isiPad = navigator.userAgent.indexOf('iPad') != -1

//or
var ua = navigator.userAgent;
var isiPad = /iPad/i.test(ua)
if (isiPad) {
$(window).on('load orientationchange', function(event) {
    if(window.innerHeight > window.innerWidth){
        console.log("portrait");
    } else {
        console.log("landscape");
    }
});
}

【讨论】：

这将是所有设备，而不仅仅是 ipad。它甚至适用于移动设备