CREATING WEB PAGES FOR iPHONES

You might think that the iPhone would wrap the text to suit its small screen, but life isn't as simple as that. What you will see if you open that page is shown in the picture on the left, below.


As you can see the iphone will shrink the page to show it in its normal layout, but too small to be legible. You can of course zoom it easily enough, but as shown in the picture above right, it still doesn't wrap the text you will have to scroll laterally to read every line, which is a very uncomfortable reading experience.

So now we need to amend the width of the page to suit the device. Recent iPhones have a width of 414px (older ones have 320 or 375px) (Retina displays have a width of 818 actual pixels, but to maintain compatibility the pixels are doubled in each dimension in Safari and so it reports a width of 414 px).

While it's possible to identify that the request is coming from an iPhone, it's better to detect the screen width and amend the body width to match, so that it will work for any small device.

In order to do this you need to add some code to the header part of the page code. (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 (obviously you wouldn't include the line numbers, and if you copy this out to a plain text file they won't show):

1. <script language="JavaScript1.2"><!-- Hide from old browsers
2. scrnwt = (screen.width)
3. if (scrnwt >= 795) {scrnwt = 795}
4. document.write ('<style type="text/css"> body{ width: ' + scrnwt + ';}</style>')
5. // Stop hiding from old browsers --></script>

Line 2 detects the screen width (in the case of a computer this is the screen width, not the browser window width) and sets a property, scrnwt, to it: you could make it screen.width -2 to leave a very slight right-hand margin if you want. (You can name the property anything you like, it doesn't have to be scrnwt.)

Line 3 detects if the screen width is equal to or higher than 795 and limits the body width to 795 so that if viewed on a computer it doesn't spread the lines out excessively wide.

Line 4 writes a 'style' tag specifying the body width, getting the amount from the previous line.

This demo page has a fixed body width of 320 to show you what the result looks like when that width is viewed on a computer: