Detecting the iPhone’s orientation on a website is very easy: the only thing needed is a little bit of Javascript to listen to the onorientationchange event:
-
window.onorientationchange = function() {
-
if (window.orientation)
-
document.body.setAttribute('class', 'landscape');
-
else
-
document.body.setAttribute('class', 'portrait');
-
}
-
window.onload = function() {
-
window.onorientationchange();
-
}
The window.orientation variable can have three different values: 0, 90 and -90. In most cases we wont mind if its 90 or -90, since both are landscape, so I have ignored this on the code above. Adding a CSS class to the body is the cleanest way to handle iPhone’s orientation. Now it’s up to you to set up the CSS for both layouts.
The resolution of the visible screen (viewport) changes drastically from portrait to layout, so be aware of this:
- Portrait visible screen: 320 x 356 px
- Landscape visible screen: 480 x 196 px
Source: Web Apps Reference Library – Handling Orientation Events (needs registration)
