1. OVERVIEW & PREPARATION
2. BODY WIDTH
3. THE 'VIEWPORT'
4. AUTOMATIC REDIRECTION
5. THE iPAD
6. 'RESPONSIVE' PAGES
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
This because there is a special facility (not applicable on desktop
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
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
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
download: it will be easier to copy out the codes from this). Here is
<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