使用javascript檢測iPad設備方向

Question

我正在使用以下代碼檢查iPad的方向。 僅當我旋轉設備或更改iPad的方向時才調用此方法。 如果在橫向模式下啟動該應用程序，並且當我導航至此屏幕時，不會調用以下方法。 如何在不旋轉iPad的情況下檢測iPad的方向。

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

Answer 1

這將檢查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");
    }
});
}

Answer 2

這也應該工作：

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

Answer 3

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

也添加load事件。 如果觸發window.load時，相關屏幕在DOM中可用，這將有所幫助。 否則，在將屏幕動態注入到DOM后trigger事件（如@Tushar所建議）。

請記住， orientation change或resize事件將不會在最初加載頁面時觸發，如果要最初運行它們，則還必須包括load事件。 或者，如果它依賴於DOM的動態部分，則稍后trigger它們。