Detect and Prompt iPhone Visitors
This tutorial will outline a simple procedure used to display an “iPhone style” modal prompt whenever a user visits your site from an iPhone/iPod touch. For this example we will combine user agent detection with the JavaScript confirm() method to create a prompt which allows the user to select between your regular and iPhone-optimized versions of your website.
Once they’ve made their selection the user will be forwarded to the appropriate version of your site. The resulting prompt will look like the example to the left. The alert will inherit the default look from the iPhone.
Step 1
Create a function to detect the target device.
<script type="text/javascript">
function iPhoneAlert() {
if((navigator.userAgent.match(/iPhone/i))||(navigator.userAgent.
match(/iPod/i))){
}
}
</script>Step 2
Extend the function to display a modal prompt upon success.
<script type="text/javascript">
function iPhoneAlert() {
if((navigator.userAgent.match(/iPhone/i))||(navigator.userAgent.
match(/iPod/i))){
var question = confirm(”Would you like to view the iPhone-optimized version of our site?”)
if (question){
window.location = “http://lite.iphonemicrosites.com/home.html”;
}else{
window.location = “http://iphonemicrosites.com/mainsite.html”;
}
}
}
</script>Step 3
Call the function by adding an onLoad event handler to the body tag.
<body onLoad="iPhoneAlert();">This tutorial could be further extended to store the user preference in a cookie for future visits.
We’ve also covered a less intrusive method consisting of displaying a custom message on the website itself. Regardless of which method you choose, notifying your visitors of your iPhone Microsite as opposed to forcing them to view it is a good way to enhance your visitors experience.
Thanks to Rob G. for pointing out a minor syntax error and noting we neglected to mention that user agent detection is not the best detection solution. We hope you have found this information useful.
A zip of the complete html file can be found here. Let us know what you think.
-Shaun Mackey
(3 votes, average: 4.33 out of 5)
Loading ...
Comment by Narendar: July 2, 2008 @ 10:56 pm
It is very help full, much helps for new web developers for Iphone
Comment by GenghisPhlip: July 9, 2008 @ 6:47 am
Very nice! Thank you very much for this great information!
Comment by Andrea: July 29, 2008 @ 4:44 am
If you use this code and you visit the site with a regular browser you get a blank page. The correct code that allow you to go directly to the regular site if visiting with a normal browser is
function iPhoneAlert() {
if((navigator.userAgent.match(/iPhone/i))||(navigator.userAgent.
match(/iPod/i))){
var question = confirm(”Would you like to view the iPhone-optimized version of our site?”)
if (question){
window.location = “http://lite.iphonemicrosites.com/home.html”;
}else{
window.location = “http://iphonemicrosites.com/”;
}
} else {
window.location = “http://iphonemicrosites.com”;
}
}
Comment by admin: August 6, 2008 @ 8:53 pm
Thanks for your comment Andrea, good point! As this script is simplified for illustrative purposes it does not account for display normal browser content. Its worth noting one can also display html content on this page for regular browsers if redirection is not a desirable solution (ie, a splash page).
-Admin