Detect iPad with javascript

Corey — Mon, 08 Aug 2011 06:50:34 +0000

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

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.Similar Posts:

CAM Web Design » jQuery

Detect iPad with javascript