Mobile

i-phone & i-pad Detection

Problem:
Apple devices (i-phones, i-pads, etc) do not support Flash files but instead will just display a blank white page. This can leave the website visitor confused.  The Web Developer needs to create a message letting the user know that their browser doesn’t support this feature and/or redirect them to a different web page with alternative content. I recently had to do his for a website I manage so decided to blog about it in case another Web Developer has run into this problem trying to support Flash apps.

Solution:
On the website that has a Flash file embedded on one of the pages,  I added code to the head tag inside that index.html file. Now if you go to the webpage with the Flash App embedded – if you view it from a PC, you see the Flash App. If you view it on your Android phone, you see the Flash App. But if you go there on your i-phone or i-pad your device is detected and you are re-directed to a different web page. Since we don’t have an iOS compatible app yet, the page simply gives the user a message that the app is not supported but will be in the future.

Here is the code I used:

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
if (document.cookie.indexOf("iphone_redirect=false") == -1) {
window.location = "http://www.wayne-dalton.com/Pages/garage-door-design-center.aspx";
}
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s