iPad version detection in JavaScript

javascript ipad browser-feature-detection
fbrandel picture fbrandel · Sep 13, 2011 · Viewed 13.6k times · Source

Is it possible to check for the iPad version (1 or 2) in a web application? As the user agent looks identical (see http://www.webtrends.com/Support/KnowledgeBase/SolutionDetail.aspx?Id=50140000000acbiAAA) a standard check by browser does not work here.

Can we check for features (like the gyroscope) in JavaScript which are only available in version 2?

Answer

Igor Shastin picture Igor Shastin · Jun 29, 2012

Please try this fiddle. It detects version of iPad by gyroscope availability.

As you can see in Safari Developer Library, event.acceleration is not null on devices that has a gyroscope. Since iPad 1 doesn't has it, we can assume that this device is iPad 1.

To distinguish iPad 2 from iPad 3, we can check a window.devicePixelRatio property, since iPad 3 has Retina display with pixel ratio == 2.

Related questions

jQuery get the location of an element relative to window

Given an HTML DOM ID, how to get an element's position relative to the window in JavaScript/JQuery? This is not the same as relative to the document nor offset parent since the element may be inside an iframe or …

Read More
javascript scroll event for iPhone/iPad?

I can't seem to capture the scroll event on an iPad. None of these work, what I am doing wrong? window.onscroll=myFunction; document.onscroll=myFunction; window.attachEvent("scroll",myFunction,false); document.attachEvent("scroll",myFunction,false); They all work even …

Read More
What is the difference between screenX/Y, clientX/Y and pageX/Y?

What is the difference between screenX/Y, clientX/Y and pageX/Y? Also for iPad Safari, are the calculations similar as on desktop—OR there is some difference because of viewport? It would be great if you could point me …

Read More