How to detect the orientation of device at page load – iPhone

This is one situation which baffles me sometimes and I face this one regularly while developing mobile web apps – I want to know whether the device is held in portrait or landscape mode when the page first loads and then based on the result I change the look n feel. Remember landscape mode of the device is more wider and the screen width increases, so does the viewport width so you have to adjust your page layout accordingly.

I have already talked on How to detect the orientation of a mobile device using java script in one of my earlier posts. There, the example code that was presented could only detect the orientation of the device when you change it from portrait to landscape mode and vice-versa once the page loads. It used the java script event orientationchange to listen to the change in orientation of the device.

window.addEventListener('orientationchange', handleOrientation, false);

But it did not talk on how to detect the orientation at the very beginning - the page load. If you have seen my earlier post you would have noticed that I have used the orientation variable to detect the mode of the device. This orientation variable is viable only inside the event listener function of the orientationchange event. So when page loads I cannot use it. Now, to detect the orientation mode of the device at page load I will find out the viewport width and then decide whether it is landscape or portrait. This is a very easy trick to apply. For eg. If you are using iPhone or iPod in portrait mode, the viewport width is 320px but in landscape mode it is 480px. So if we detect the width at page load it should help our cause, isn't it. I have an example below with a demo link and code description.

Link to demo : http://jbk404.site50.net/html5/mobile/detect/ (open in iPhone/iPod mobile safari - once in portrait mode and then in landscape mode. You will see alert boxes informing you of the current mode. Steps - first open the link in portrait mode and you will see an alert box saying "Portrait Mode" after that rotate the device to landscape mode and then refresh the page. You will see an alert box saying "Landscape Mode"). Let's see some java script now,

window.addEventListener('load', detectOrientationMode, false);

function detectOrientationMode() {
  setTimeout(function() { window.scrollTo(0, 1); }, 10);
  //this is where our detection starts
  var viewportWidth = window.innerWidth;
  if (viewportWidth > 320) {
    alert("Landscape Mode");
    /*increase the width of wrapper so that it occupies
    full screen*/
    document.getElementById("wrapper").style.width = "480px";
  }
  else {
    alert("Portrait Mode");
  }
}

Notice how I have captured the width of the browser window at page load in line no. 2 of the event listener function. For iPhone and iPods if the width is more than 320px then it has to be the landscape mode. Once we know that it is landscape mode then inside the if block make necessary changes to your app to adapt to the new layout. That is what I have done by increasing the width of the wrapper element for my demo app. Similarly you can carry out other changes in your app. Note that this example only detects the orientation at load times - when the page loads for the first time. To detect the orientation change after that you can use the code from my earlier post.

The full code for the demo is below,

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>
<style type="text/css">
body
{
  margin:0;
  padding:0;
}
#wrapper
{
  width:320px;
  height:416px;
  background-color:#ffff6a;
  text-align:center;
  line-height:20px;
}
</style>
</head>
<body>
  <section id="wrapper">
    How to detect the orientation of device at page load
  </section>
  <script type="text/javascript">
    window.addEventListener('load', detectOrientationMode, false);

    function detectOrientationMode() {
      setTimeout(function() { window.scrollTo(0, 1); }, 10);
      //this is where our detection starts
      var viewportWidth = window.innerWidth;
      if (viewportWidth > 320) {
        alert("Landscape Mode");
        /*increase the width of wrapper so that it occupies
        full screen*/
        document.getElementById("wrapper").style.width = "480px";
      }
      else {
        alert("Portrait Mode");
      }
  }
</script>
</body>
</html>
About these ads

One thought on “How to detect the orientation of device at page load – iPhone

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s