Detect Orientation Change on iPad (or iPhone)

19. July 2012 Mobile, UI Stuffs 0

A few years back I came across a mobile site (and accompanying tutorial) by Engage Interactive (UK) that did some magical stuff. The navigation of this small sub-site was driven by orientation changes. The four areas of the site were revealed only by rotating the device! Mind:blown (back then, of course).

Anyway, here’s the code that made it happen:

<;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>;

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.