Detect and Set the iPhone & iPad’s Viewport Orientation Using JavaScript, CSS and Meta Tags

Last week we showed you how to use Safari for iPhone and iPad website testing. This week we’ll show you how to detect and set the devices’ viewport orientation to Landscape or Portrait using JavaScript, CSS and meta tags.

Developing websites for the iPhone and iPad is a bit different than developing a website for a standard, desktop web browser. When you are viewing a site using an iPhone, for instance, if you are holding the device upright, you will see the page in portrait view. If, however, you turn the device sideways, the view of the web page changes to landscape view. That is, if you have properly designed your website. We’re going to show you how to achieve this effect using several different methods.

Using Meta Tags for iPhone and iPad Orientation

The best way to detect the orientation of the device is by using meta tags. The viewport meta tag is used by Safari on the iPhone and iPad to determine how to display a web page. Properties of the viewport meta tag include width, height, initial-scale, user-scalable, minimum-scale and maximum-scale. Here is a table which shows the minimum and maximum values for those properties:

The initial-scale is the one that renders when the page initially loads. The scale is changed by pinching and double tapping on the device. Instead of using a fixed width, you should use the width=device-width which automatically makes the width equal to the width of the device’s screen:

<meta name=”viewport” content=”width=device-width/” >

To keep users from expanding the window size beyond the size it needs to display properly, you can set the maximum-scale to 1.0. I would use this technique carefully, as it takes away the user’s ability to enlarge the page for viewing on smaller screens such as that of the iPhone. That said, here is how it’s done:

<meta name=”viewport” content=”width=device-width, maximum-scale=1.0″ />

Using JavaScript for iPhone and iPad Orientation

The meta tags shown above work very well, however, you can also use JavaScript to do the same thing, since both the iPad and iPhone support the scripting language. The following JavaScript function detects and sets the device’s viewport orientation by using the innerWidth property of the window object and setting the orient attribute of the body element regularly (in this case every 4 seconds):

<script type=”text/javascript”>
var updateLayout = function() {
  if (window.innerWidth != currentWidth) {
    currentWidth = window.innerWidth;
    var orient = (currentWidth == 320) ? “profile” : “landscape”;
    document.body.setAttribute(“orient”, orient);
    window.scrollTo(0, 1);
  }
};
iPhone.DomLoad(updateLayout);
setInterval(updateLayout, 400);
</script>

You can place the above snippet in the HEAD of your iPhone/iPad-ready web page, and it will set the display to the appropriate orientation setting.

Using CSS for iPhone and iPad Orientation

Another method that you can use to your advantage is using Cascading Style Sheets (CSS). Obviously, you will need a style sheet that is devoted to portrait use, and another for landscape use. We will cover the creation of such style sheets in a future article, but for now you need to know how you will use them. It

’

s as simple as adding a link to your style sheets within your HEAD tag:

<link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait.css”>
<link rel=”stylesheet” media=”all and (orientation:landscape)” href=”landscape.css”>

As you can see, there is a lot to learn when it comes to creating an iPhone or iPad-ready website. So far we’ve learned how to detect the iPhone and iPad, how to test our websites using Safari, and how to detect and set the orientation for iPad and iPhone users. Next time we will begin discussing the use of CSS and how to get started on the design of your iDevice-ready website!