使用 javascript 检测 iPad 设备方向

Posted 2023-03-16

【中文标题】使用 javascript 检测 iPad 设备方向

【英文标题】：Detect iPad device orientation using javascript

【发布时间】：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; 似乎是一个简单的解决方案？

查看这个答案***.com/questions/4917664/…

顺便说一句，你错过了bind中的)

【参考方案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。它甚至适用于移动设备