CREATING WEB PAGES FOR iPHONES

            CONTENTS

1. OVERVIEW & PREPARATION

2. BODY WIDTH

3. THE 'VIEWPORT'

4. AUTOMATIC REDIRECTION

5. THE iPAD

6. 'RESPONSIVE' PAGES

The 'Viewport'

As we saw in page 2, even limiting the body width of your page to the width of the device screen doesn't produce the expected display on an iPhone:


This because there is a special facility (not applicable on desktop browsers) called the 'Viewport'. This is in effect a 'window' on the page which the iPhone uses, rather than making use of the body width as you might expect. By default this is set to 980 pixels. A site which is wider than that will not display complete, but one which is smaller will have space to the right as shown in the picture.

If you would like a detailed explanation of the Viewport, Apple provide one here: however all we need to do is to set the Viewport to the width of the site, and this is simple, involving adding another line of code to the 'head' section. (This, and the other codes in the article, are also available in a zipped text file you can download: it will be easier to copy out the codes from this). Here is the code:

<meta name="viewport" content="width=device-width">

So what we have now is a page which works on the iPhone properly. The browser sets the body width to match the width of the screen, and then sets the Viewport to the same dimension, so that the narrow column seen in the picture at left will fill the screen width.

Incidentally I should caution you that using online iPhone 'emulators' or apps such as 'iPhoney' won't give you an accurate representation of an iPhone's behaviour because they will still report your computer's actual screenwidth and so won't handle the page as expected.

So far so good: but what we don't want is people with desktop computers seeing the narrow version, or people with iPhones seeing the desktop version; so some more coding is needed to ensure that visitors are sent to the correct version; this is examined in the next page.