dev.enekoalonso.com » orientation http://dev.enekoalonso.com having fun with code Wed, 12 Oct 2011 21:40:17 +0000 en hourly 1 Detecting iPhone’s orientation http://dev.enekoalonso.com/2008/12/02/detecting-iphones-orientation/ http://dev.enekoalonso.com/2008/12/02/detecting-iphones-orientation/#comments Tue, 02 Dec 2008 16:59:23 +0000 Eneko Alonso http://dev.enekoalonso.com/?p=70 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:

  1. window.onorientationchange = function() {
  2.   if (window.orientation)
  3.     document.body.setAttribute('class', 'landscape');
  4.   else
  5.     document.body.setAttribute('class', 'portrait');
  6. }
  7. window.onload = function() {
  8.   window.onorientationchange();
  9. }

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)

Related Posts:

]]> http://dev.enekoalonso.com/2008/12/02/detecting-iphones-orientation/feed/ 0