Techniques » Detect iPad with javascript

We created and maintain an intranet website for an electric utility (of whom I work for – they pay my bills).  The site is accessed by personnel with iPads, and it contains some flash content (AccuWeather Accunet and Open Flash Chart). As you may already know flash is not supported by Apple’s Safari browser. We wanted to detect if the user was accessing the site with an iPad. If they are we use jQuery to alter the HTML code, removing the flash content and display a message “Some content not available, your device does not support Flash”. Of course we could replace the HTML with alternative content rather than the pat message, but for our needs this is what we’ve done.

First we use one line of javascript to detect if the user agent is an iPad.

1
var isiPad = navigator.userAgent.match(/iPad/i) != null;

Then we use jQuery to replace the HTML, where necessary, with our message using the html() function. Exampled below, we’re replacing the HTML if a <div> with an id of AccuWeather, with our message.

1
2
3
if (isiPad == true) {
  $("#AccuWeather").html('Some content not available, your device does not support Flash');
}

Our stance on Adobe Flash, we fully support the new HTML5 and CSS3 standards, and are not fans of Flash. Nor are we fans of Adobe’s new product Edge. We prefer to hand code, it’s usually much lighter and more understandable than code from a WYSIWYG.

About Corey

Corey was born, raised, and still lives in CMCH, NJ (about 5 minutes outside of Wildwood). He loves the Jersey Shore, and has loads of sand in his shoes! He has been involved with computers and programming since first purchasing a Commodore 64 in 1984. Corey formally began a web design company in 2004, ever broadening his progamming languages and skills since. code

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>