Technical notes index

CREATING WEB PAGES FOR iPHONES


<<previous page       page 5       next page>>
            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:

  1. <script language="JavaScript1.2"><!-- Hide from old browsers
  2. var wd = 1
  3. var lastp = (document.referrer);
  4. scrnwt = (screen.width)
  5. if (lastp == "FULL URL OF YOUR iPHONE PAGE") {}
  6. else if (lastp == "FULL URL OF YOUR iPAD PAGE") {}
  7. else if (navigator.appVersion.indexOf("iPad")>=0) {wd = 3}
  8. else if (scrnwt <= 638) {wd = 2}
  9. if (wd == 3) {window.location=("ipad.html")}
  10. else if (wd == 2) {window.location=("iphone.html")}
  11. // Stop hiding from old browsers --></script>

iPad version:

  1. <script language="JavaScript1.2"><!-- Hide from old browsers
  2. var wd = 1
  3. var lastp = (document.referrer);
  4. scrnwt = (screen.width)
  5. if ((document.URL.indexOf('file')) >=0) {}
  6. else if (navigator.appVersion.indexOf("iPad")>=0) {}
  7. else if (lastp == "FULL URL OF YOUR DESKTOP PAGE") {}
  8. else if (lastp == "FULL URL OF YOUR iPHONE PAGE") {}
  9. else if (scrnwt >= 639) {wd = 2}
  10. else if (scrnwt <= 638) {wd = 3}
  11. if (wd == 2) {window.location=("desktop.html")}
  12. else if (wd == 3) {window.location=("iphone.html")}
  13. // Stop hiding from old browsers --></script>

iPhone version:

  1. <script language="JavaScript1.2"><!-- Hide from old browsers
  2. var wd = 1
  3. var lastp = (document.referrer);
  4. scrnwt = (screen.width)
  5. if ((document.URL.indexOf('file')) >=0) {}
  6. else if (lastp == "FULL URL OF YOUR DESKTOP PAGE.html") {}
  7. else if (lastp == "FULL URL OF YOUR iPAD PAGE") {}
  8. else if (navigator.appVersion.indexOf("iPad")>=0) {wd = 2}
  9. else if (scrnwt >= 639) {wd = 3}
  10. if (wd == 2) {window.location=("ipad.html")}
  11. else if (wd == 3) {window.location=("desktop.html")}
  12. // Stop hiding from old browsers --></script>
  13. </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.

  1. <script language="JavaScript1.2"><!-- Hide from old browsers
  2. scrnwt = (screen.width)
  3. if (scrnwt >= 601) {document.write ('<img style="width: 422px; height: 403px;" alt="" src="large.jpg">')}
  4. else if (scrnwt <= 600){document.write ('<img style="width: 315px; height: 301px;" alt="" src="small.jpg">')}
  5. // 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.

<<previous page       page 5       next page>>

Roger Wilmut. Javascript code may be used freely. This site is not associated with Apple.
 
No warranty is expressed or implied as to the suitability of the quoted code for this or any other purpose.