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
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!
[...] link è abbastanza vecchio, dai un’occhiata qui: iPhone Screen Orientation: Portrait and Landscape :: CSS, JavaScript and XHTML Explained Nel tuo codice c’è l’handler per l’evento onOrientationChange del body? Comunque se hai un sito [...]
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