iPhone Screen Orientation: Portrait and Landscape September 11, 2009
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
I am on a panel at
thanks
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
Hi Simon-
To center, use margin auto.