Detect iPad device orientation using javascript

Question

I am using the following code to check the orientation of the iPad. This method is getting called only when i rotate the device or change the orientation of iPad. If a launched the app in landscape mode and when i navigate to this screen the below method is not getting called. How can i detect the orientation of the iPad without rotating the iPad.

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

Use `trigger`. This will trigger the event and make the handler run. `$(window).trigger('orientationchange')`; — Tushar, Oct 12 '15 at 14:15
`window.innerHeight > window.innerWidth;` seems like an easy solution ? — adeneo, Oct 12 '15 at 14:15
check this answer http://stackoverflow.com/questions/4917664/detect-viewport-orientation-if-orientation-is-portrait-display-alert-message-ad — Ahmed Gamal, Oct 12 '15 at 14:20

score 0 · Answer 1 · edited Jan 16 '19 at 15:11

0

This will check the iPad existence and then compare the height with width.

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");
    }
});
}

edited Jan 16 '19 at 15:11

Aakash Dave

866
1
15
30

answered Oct 12 '15 at 14:18

Matt

1,081
15
27

This will be all the devices and not the ipad only. It will even work for mobile devices – Aakash Dave Dec 27 '18 at 01:04

score 0 · Answer 2 · answered Oct 12 '15 at 14:19

0

This should work too:

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

answered Oct 12 '15 at 14:19

michelem

14,430
5
50
66

sabithpocker · Answer 3 · 2015-10-12T14:32:03.570

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

Add load event as well. This will help if the screen in question is available in DOM when window.load is triggered. Else trigger the event after the screen is injected to DOM dynamically(as suggested by @Tushar).

Keep in mind that orientation change or resize events will not be triggered as page loads initially, if you want to run them initially you will have to include load event as well. Or trigger them later if its dependent on dynamic parts of DOM.

Detect iPad device orientation using javascript

3 Answers3