Detect iPad orientation change

Question

How to detect with javascript or jquery when user turns iPad from vertical position to horizontal or from horizontal to vertical?

Karl-Bjørnar Øie · Accepted Answer · 2011-06-06T09:19:22.000

42

Try

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

edited Jun 06 '11 at 09:19

answered Jun 06 '11 at 09:06

Karl-Bjørnar Øie

5,554
1
24
30

5

On the Ipad 1 I'm testing with the event object does not have an orientation property, but the window object does, so I had to use `orientation` rather than `event.orientation`. – tremby Oct 02 '12 at 23:15
Thank you very much for the answer @Karl-Bjørnar Øie.It solved my issue in the best way! – Anahit Ghazaryan Jun 03 '15 at 07:57
@Mrunal in pageLoad() or similar function that will always be called before the page will actually be interacted with. – GreySage Jul 20 '17 at 17:24

martynas · Answer 2 · 2014-03-12T01:05:10.677

20

You can detect the orientation change event using the following code:

jQuery:

$(document).ready(function() {
    $(window).on('orientationchange', function(event) {
        console.log(orientation);
    });
});

Check if device is in portrait mode

function isPortrait() {
    return window.innerHeight > window.innerWidth;
}

edited Mar 12 '14 at 01:05

answered Mar 01 '14 at 15:01

martynas

12,120
3
55
60

2

Shouldn't that be `console.log(event.orientation)` ? (event missing) – David Jan 23 '17 at 13:55

Simon · Answer 3 · 2011-06-06T09:16:01.890

In Javascript:

<button onclick="detectIPadOrientation();">What's my Orientation?</button>

<script type="text/javascript">
 window.onorientationchange = detectIPadOrientation;
 function detectIPadOrientation () {

    if ( orientation == 0 ) {
     alert ('Portrait Mode, Home Button bottom');
    }
    else if ( orientation == 90 ) {
     alert ('Landscape Mode, Home Button right');
    }
    else if ( orientation == -90 ) {
     alert ('Landscape Mode, Home Button left');
    }
    else if ( orientation == 180 ) {
     alert ('Portrait Mode, Home Button top');
    }
 }
</script>

Or for including additional stylesheets:

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

Both taken from: http://favo.asia/2010/07/detecting-ipad-orientation-using-javascript/ which, FYI, was the first result on Google for 'detect ipad orientation javascript'...

Now, this question is at the top in Google :-) – Oliver Nov 09 '16 at 10:51 — Oliver, Nov 09 '16 at 10:51
@simon where are you getting the orientation variable from? – MJB Dec 11 '17 at 11:31 — MJB, Dec 11 '17 at 11:31

Fatih Acet · Answer 4 · 2018-02-07T21:54:44.747

-1

function detectIPadOrientation (orientation) {  
   if ( orientation == 0 ) {  
    alert ('Portrait Mode, Home Button bottom');  
   }  
   else if ( orientation == 90 ) {  
    alert ('Landscape Mode, Home Button right');  
   }  
   else if ( orientation == -90 ) {  
    alert ('Landscape Mode, Home Button left');  
   }  
   else if ( orientation == 180 ) {  
    alert ('Portrait Mode, Home Button top');  
   }  
}

window.onorientationchange = detectIPadOrientation;

edited Feb 07 '18 at 21:54

answered Jun 06 '11 at 09:11

Fatih Acet

28,690
9
51
58

2

Am I missing something? where are you getting orientation variable? – Mark Anthony Uy May 30 '16 at 03:28
1

Was this just a copy+paste of Simon's answer? – GreySage Jul 20 '17 at 17:27
@GreySage who is Simon? – Fatih Acet Feb 07 '18 at 21:55
The user with the answer above yours. – GreySage Feb 07 '18 at 22:06

Detect iPad orientation change

4 Answers4

Linked