Technical notes index

CREATING WEB PAGES FOR iPHONES

n
<<previous page       page 4       next page>>
            CONTENTS

1. OVERVIEW & PREPARATION

2. BODY WIDTH

3. THE 'VIEWPORT'

4. AUTOMATIC REDIRECTION

5. THE iPAD

6. 'RESPONSIVE' PAGES

Automatic redirection

Over the previous pages we've created a page whose body is the correct width for any device, and which the iPhone will display properly, filling the full width of the screen.

Now we need to ensure that people with iPhones are sent to the iPhone page, and people with desktop computers are sent to the full-sized page. In each case we need code to detect that the wrong device is in use, and redirect the visitor to the other version.

Looking at the desktop version first: there are various ways of doing this, some of them incredibly complicated; but the simplest way is to detect the screen width and bounce anything with a width smaller than the chosen size to the iPhone page.

(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).

It's assumed for the purposes of the demonstration that the desktop version is called desktop.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).

This is the code for the 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 (scrnwt <= 638) {wd = 2}
  7. if (wd == 2) {window.location=("iphone.html")}
  8. // Stop hiding from old browsers --></script>

In line 2, the variable wd is set to 1 by default; in line 3 the variable lastp is set to document.referrer, which is the page from which your visitor came; in line 4 the property scrnwt is set to the width of the monitor or device.

In line 5 the browser is told to do nothing and ignore the rest of the script if the previous page was the iPhone version - this is necessary if there is a manual link. You must enter the full URL of your iPhone page, including the http://, and it must be enclosed within double inverted commas.

In line 6 wd is reset to 2 if the screen is smaller than 638; and in line 7 the visitor is bounced on to iphone.html if wd is 2.

638 is chosen because it will allow 640x480 monitors to see the desktop version, but anything smaller will see the iPhone version. If you would like the iPad to see the iPhone version rather than the desktop version (although the iPad does handle most websites quite well) you can replace this with 795: of course anyone with a 640x480 monitor will see the iPhone version, but they are pretty rare these days.

Now we need to add code to the iPhone page to bounce anyone with a larger monitor on to the desktop version: again, place the script in the 'head' section :

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") {}
  7. else if (scrnwt >= 639) {wd = 2}
  8. if (wd == 2) {window.location=("desktop.html")}
  9. // Stop hiding from old browsers --></script>

Lines 2 and 3 as above; line 4 recognizes that you are viewing the page on your computer and so doesn't bounce you to the desktop page.

In line 6 the browser is told to do nothing and ignore the rest of the script if the previous page was the desktop version - otherwise it would just bounce back to that page. You must enter the full URL of your desktop page, including the http://, and it must be enclosed within double inverted commas.

Lines 7 and 8 as lines 6 and 7 in the previous code, redirecting this time to the desktop version.

Again, you can amend 639 to 796 if you want to include the iPad. (Page 5 looks at creating pages for the iPad.)

So now, each type of device - phone or desktop - will see the correct page. However you will find that if you look at your local copy of the iPhone page on your desktop computer, you will of course be bounced on to the desktop version - there will be a line of code in the additional coding on page 5 to prevent this.

As mentioned on the previous page, online iPhone 'emulators' won't show the redirection because they still report your computer's actual screen size. If you want to check your working you'll need to have an actual iPhone (or go to an Apple Store and play with one there).

It's quite a good idea to provide a manual link on each page to the other version, so that for example desktop viewers can see the iPhone version if they want to. You may not want them to be able to do this, but it's a useful facility; a simple link will suffice as the codes above will stop it bouncing back.

Here are links to the two finalised versions of the page: since writing this the actual page has been reformatted to be 'responsive'. (Both will open in a new window on a computer: close the window to return here.)

DESKTOP VERSION       MOBILE VERSION

Web pages for the iPad are discussed in the next page.




<<previous page       page 4       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.