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 OrientationThe 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:
|Property||Default Value||Minimum Value||Maximum Value|
|height||based on aspect ratio||223||10000|
|inital-scale||fit to screen||minimum-scale||maximum-scale|
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 CSS for iPhone and iPad OrientationAnother 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!