iPhone Screen Orientation: Portrait and Landscape

When you tilt your iPhone, the screen changes orientation. The website you developed for the default portrait orientation may not look good in landscape mode, especially if you developed your page for the 480 (h) x 320 (w) screen.

In my original iPhone post, I instructed detecting the width of the screen at regular intervals to detect the orientation of the iPhone. That post was written within a week of the launch of v1 of the iPhone. There is now a better method: use the onOrientationChange method to change the class of your body based on the page’s orientation. Include CSS for both normal page layout, and then include a series of overrides for when the screen is displaying your iPhone application in landscape mode.

What you want to include is the unobstrusive javascript equivalent of:

<body onOrientationChange="changeMyClass();">

In this case, we’ll call

switch(window.orientation){
   case 0:
       //handle portrait actions
       //document.getElementsByTagName('body')[0].className = 'portrait';
       break;
  case -90:
  case 90:
       // handle landscape actions
       //document.getElementsByTagName('body')[0].className = 'landscape';
       break;
} //end switch


This entry was posted in Browsers, Character Entities, HTML, iPhone, JavaScript, Web Development and tagged . Bookmark the permalink.

8 Responses to iPhone Screen Orientation: Portrait and Landscape

  1. chris says:

    thanks 😀

  2. Simon says:

    Hi Chris,

    Thanks for this but as I am mainly a designer and am only dipping my tow in iphone site development, could you expand on this by advising how to implement?

    Centering my existing portrait layout would be ideal.

    Cheers

    Simon

  3. Estelle Weyl says:

    Hi Simon-

    To center, use margin auto.

  4. Ryan Christianson says:

    Estelle, thanks for posting this- was what I was looking for. Even better was to find it from someone that I know 🙂 Iphone Dev Camp for the win. Thanks!

  5. Pingback: Sito ottimizzato per iPhone - iPhone Italia Forum

  6. Estelle Weyl says:

    Hi Ryan-

    Long time no talk. I am actually writing a book on CSS3 and HTML5 development for webkit: http://www.apress.com/book/view/9781430230069

  7. laurence zankowski says:

    Estelle,

    first , thank you for doing this.
    second: I a bit confused here. do I put this in my html doc or do I figure out a way to put this in a ccs doc. ultimately, now with the iPad do I have to create 3 ccs docs? or could I have just 1 and figure out a way to call each one depending on whether it is a desktop, iPhone/ touch or a ipad.

    be well

    laurence

  8. Roger says:

    I don’t think a switch is really necessary here.

    I’d do with:

    if(window.orientation==0){
    //handle portrait actions
    document.getElementsByTagName(‘body’)[0].className = ‘portrait’;
    } else {
    // handle landscape actions
    document.getElementsByTagName(’body’)[0].className = ‘landscape’;
    }

Leave a Reply

Your email address will not be published. Required fields are marked *