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
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.
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!
Pingback: Sito ottimizzato per iPhone - iPhone Italia Forum
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
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
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’;
}