Friday, September 14, 2007

Creating a basic iPhone page: Detecting the browser

Even though I'm working mainly on an iPhone page for our campus, I don't want to assume that other mobile browsers won't be showing up more and more on campus. There are probably better ways to do this, but I made two different pages, one for most mobile browsers and one for the iPhone.

I placed both home.html (the default index page on our system) and i.html, the iPhone-specific page in a directory called "m" on the document root of the server my.acu.edu. The url for the mobile app is then:

my.acu.edu/m

On the default "home" page I inserted a script from iphonewebdev.com that sniffs the browser and either leaves the user on the current page or redirects to the iPhone-specific page. Here's the html wrapper for that page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ACU Mobile</title>
<script>
if (navigator.userAgent.indexOf('iPhone') != -1) {
/* iPhone user */

window.location = "http://my.acu.edu/m/i.html"
}
</script>
</head>
<body>
Mobile links go here.
</body>
</html>

What happens is this:
  • home.html checks your browser to see if it's an iPhone.
  • If not, it displays the text in the page.
  • If so, it redirects to a page called i.html.
That's all there is to it.

0 comments: