How to detect an iPhone visitor

AllAboutiWeb not only has an article on how to make your iWeb site look good on an iPhone or iPod Touch, it has recently published a tutorial that allows you to detect if you have a visitor from one of Apple’s mobile devices.

It is quite useful to detect visitors from a mobile device because that allows you to redirect them to a modified website suited for smaller screens.

It actually isn’t very hard – here’s how:

All you have to do is add a small snippet of code to all of your pages. Done! You can add this piece of HTML code manually (as the AllAboutiWeb tutorial does it) or using a tool like iTweak.

We will show you how to add this code using iTweak. If you wish to add it manually, we suggest following the excellent tutorial by AllAboutiWeb.

1. Start by downloading iTweak.
2. The following script handles everything from detecting your visitors and redirecting them to your modified website. There is only one piece in the puzzle that you have to change. The script needs to know, to where it should redirect visitors from mobile devices.
   So in the script below, replace the sampleaddress.com/MobileSite with the address you want your mobile visitors to be directed to.

   <script type="text/javascript">
if((navigator.userAgent.match(/iPhone/i)) ||(navigator.userAgent.match(/iPod/i))) {
if (document.cookie.indexOf("iphone_redirect=false") == -1)
window.location = http://sampleaddress.com/MobileSite;}
}
</script></head>

3. Now open up iTweak and navigate to the Search & Replace tab. Select the checkmark. Then choose your published site. If you publish to MobileMe or .Mac you will find your site on the iDisk (located at iDisk/Web/Sites/)
   If you publish to a folder, you will hopefully know where your site is.
   If you publish to your FTP server directly from iWeb, you will have to download your site from the server first. iTweak can only edit your site if they are on your hard-drive or on the iDisk.
4. Once your site is chosen, click the + button and paste the following code into the search box:

   </head>
   
   In the replace box, you paste the edited code from step two. Do make sure you paste all of the code into the box.

   In the end it should look similar to this:

   

5. You can now optionally Save the Search & Replace table so that you don’t have to re-edit and type the code you want to run iWeb.
6. Now click the Process Site button and let iTweak add the code to your site. If you now view you site from an iPhone or iPod touch, you should automatically be redirected to your mobile site.

Do you want to create sitemaps for your iWeb site? Add some Meta-Tags? Check out iMap.