CONTENTS
1. OVERVIEW & PREPARATION
2. BODY WIDTH
3. THE 'VIEWPORT'
4. AUTOMATIC REDIRECTION
5. THE iPAD
6. 'RESPONSIVE' PAGES
Web
pages for the iPad
The iPad is the classic example of a device which no-one remotely
thought they wanted: then when it was released Apple couldn't make
enough to satisfy the demand. It falls into third place behind desktops
and iPhones for browsing because it's not as portable as the iPhone,
but there are still significant numbers using it, and you may want to
take this into consideration when designing your pages. There are
basically three options: leave the desktop pages are they are for the
iPad; make a special version for the iPad; or send iPad users to the
iPhone version but provide larger versions of any images which are too
small for the iPad.
Option 1: use desktop pages
The iPad handles most ordinary web pages surprisingly well: if
the page has a container and a body with background it simply ignores
the background and treats the container as the page. When used
horizontally, in landscape mode, its pixel width is 1024 - the same as
smaller laptops; in portrait mode the width is 768. (Retina displays
have twice the number of pixels in each direction, but for
compatibility Safari reports 768 x 1024 and pixels are doubled). Note
that it still reports 768 as the width even when in landscape.
Provided your pages are not too complicated you can leave them as they
are. You should avoid pop-ups (all windows open full screen), and very
small text size will be miniscule on the iPad and difficult to read.
Option 2: special pages for the iPad
If necessary you can create a special version for the iPad, bearing it
limitations in mind. You will therefore need three sets of code, one
for each device, to handle automatic redirects. Each page will need the
applicable code below instead of the codes on page 4. Again, it's
assumed for the purposes of the demonstration that the desktop version
is called desktop.html, the iPad version is called ipad.html, and the
iphone version is called iphone.html - obviously you will change the
filenames to suit your pages. It's also assumed that both files are in
the same folder: if they aren't you will obviously need to amend the
relative URL (e.g. ../foldername/iphone.html if they are in separate
folders).
The following, 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).
Desktop version(obviously you wouldn't include the line numbers, and if
you copy this out to a plain text file they won't show) - Place the
following script anywhere between the
<head> and </head> tags:
<script
language="JavaScript1.2"><!-- Hide from old browsers
var wd = 1
var lastp = (document.referrer);
scrnwt = (screen.width)
if (lastp == "FULL URL OF YOUR iPHONE PAGE") {}
else if (lastp == "FULL URL OF YOUR iPAD PAGE") {}
else if (navigator.appVersion.indexOf("iPad")>=0) {wd =
3}
else if (scrnwt <= 638) {wd = 2}
if (wd == 3) {window.location=("ipad.html")}
else if (wd == 2) {window.location=("iphone.html")}
// Stop hiding from old browsers --></script>
iPad version:
<script
language="JavaScript1.2"><!-- Hide from old browsers
var wd = 1
var lastp = (document.referrer);
scrnwt = (screen.width)
if ((document.URL.indexOf('file')) >=0) {}
else if (navigator.appVersion.indexOf("iPad")>=0) {}
else if (lastp == "FULL URL OF YOUR DESKTOP PAGE") {}
else if (lastp == "FULL URL OF YOUR iPHONE PAGE") {}
else if (scrnwt >= 639) {wd = 2}
else if (scrnwt <= 638) {wd = 3}
if (wd == 2) {window.location=("desktop.html")}
else if (wd == 3) {window.location=("iphone.html")}
// Stop hiding from old browsers --></script>
iPhone version:
<script
language="JavaScript1.2"><!-- Hide from old browsers
var wd = 1
var lastp = (document.referrer);
scrnwt = (screen.width)
if ((document.URL.indexOf('file')) >=0) {}
else if (lastp == "FULL URL OF YOUR DESKTOP PAGE.html") {}
else if (lastp == "FULL URL OF YOUR iPAD PAGE") {}
else if (navigator.appVersion.indexOf("iPad")>=0) {wd =
2}
else if (scrnwt >= 639) {wd = 3}
if (wd == 2) {window.location=("ipad.html")}
else if (wd == 3) {window.location=("desktop.html")}
// Stop hiding from old browsers --></script>
</head><body>
The full URLs referred to must include the http:// and server name.
Obviously the iPad version will work only on iPads, not on Android or
Windows tablets (which mostly seem to be used in landscape anyway) - as
things stand they will see the desktop version.
Here is an example of a page available in three versions. The iPad
version is different largely in the different handling of the links
(which are pop-ups in the desktop version); the iPhone version warns
that the page isn't suitable for an iPhone but offers you a link to
look at it anway.
The pages will open in new windows: close the window to return here.
Each will open to itself without redirection no matter what device you
are using, but will redirect to the correct page for the device if you
enter the URLs manually.
Option 3: use iPhone version
If you prefer the simpler version made for the iPhone as described in
pages 1-4 you need to make that the iPad is recognised. You could
simply change the specified screen width to >= 799 or <=798 so
that the iPad will be included in the redirection (so will 640x480
monitors, but these are pretty rare now): or you could add
else if
(navigator.appVersion.indexOf("iPad")>=0) {wd = 2}
below line 5 of the desktop code, and
else if
(navigator.appVersion.indexOf("iPad")>=0) {}
below line 5 of the iPhone code.
You may have some images in the iPhone version which are unnecessarily
small for the iPad: you can use the following code to provide larger
pictures above a screen size which should be set to slightly wider than
the widest of the larger images. (I've used 600 and 601 in this
example.) The images in this example are large.jpg and small.jpg and
are assumed to be in the same folder; obviously you will want to modify
this as necessary.
<script
language="JavaScript1.2"><!-- Hide from old
browsers
scrnwt = (screen.width)
if (scrnwt >= 601) {document.write ('<img
style="width: 422px;
height: 403px;" alt="" src="large.jpg">')}
else if (scrnwt <= 600){document.write ('<img
style="width:
315px; height: 301px;" alt="" src="small.jpg">')}
// Stop hiding from old browsers --></script>
You will need to make sure that you enter the correct dimensions
for
each image, otherwise they won't display as expected. If you want to be
a bit adventurous you could also wrap text in the iPad version by
adding the 'align' function.
If you copy the
code from this page, where is is likely to be wrapped, be careful not
to have any line returns between any brackets.
Here is a demonstration of an iPhone page appearing with different
versions of the images:
The
final page
examines an alternative method, suitable in some cases - the
'responsive' page.