Wednesday, October 6, 2010

JavaScript to detect iPad visitors

This post gives you a short JavaScript function to detect your iPad users. Without any further ado, a javascript code to detect iPad users:

function isiPad(){
    return (navigator.platform.indexOf("iPad") != -1);
}

You can also detect browser version and some other stuff by parsing user agent string. Here is an iPad Safari’s user agent string for your reference:

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10

Recently a friend of mine got himself an iPad and I couldn’t not notice how his internet browsing device preferences are changing (PC & iPad). More and more people are using hand held devices namely iPad to browse the internet. So it’s about time to show your iPad visitors some love and display your website designed specifically for iPad.

Let’s see how to do this. There are two way:

  1. Redirect iPad visitors
  2. Apply different CSS file for iPad users

Most of the posts on the internet related to iPad user detection are suggesting and showing you how to redirect (including myself in my previous iPhone & iPod detection post). However, I would recommend the second option, applying different CSS file.

You can apply the same technique described in applying different styling for javascript enabled browser with CSS post and apply different CSS rules for iPad visitors.

Sidenote: If you decide to redirect iPad users rather than apply different CSS style rules, than I would recommend using server side detection and redirection. You can see an example PHP code by David Walsh.

at

6 comments:

  1. JackFebruary 17, 2011 at 4:29 PM

    The suggestion sounds reasonable. One website, conditional style sheets format the site for the browser/device combination. I'm limited in my javascript and wonder what an example string would look like that served-up one style sheet for desktop (style.css) and one for iPad (pad.css)? I'd like to see it in action.

    ReplyDelete
  2. JPMarch 31, 2011 at 12:55 PM

    Even more succinct iOS detection:

    if (/iPad|iPod|iPhone/i.test(navigator.userAgent))
    {
    // whatever for iOS
    }

    ReplyDelete
  3. AnonymousApril 10, 2011 at 8:12 AM

    How would you go about if you want to switch out some minor flash content when an iphone/ipad is detected? Would you use jquery to remove the div with the flash and insert a div with some iphone friendly content, or would you use different CSS rules and have both divs in your HTML and basically use display=block and display=none?

    Is any method better than the other?

    /Peter

    ReplyDelete
  4. Kneuz++May 12, 2011 at 12:39 PM

    A good alternative for applying different styles is to use CSS media queries based on screen size. That way you can apply different styles based on the width of the browser screen.

    http://www.w3.org/TR/css3-mediaqueries/

    ReplyDelete
  5. Michael WardMay 20, 2011 at 2:40 AM

    I currently use the following code to browser detect (though I try to rely upon modernizr's feature detection where possible):

    var isBrowser = [];
    isBrowser.IE6 = navigator.userAgent.toLowerCase().match(/MSIE 6/i) !== null;
    isBrowser.iOS = navigator.userAgent.toLowerCase().match(/(iphone|ipod|ipad)/) !== null;

    Then I can do:

    if (isBrowser.iOS) { /* Code for iOS */ }

    or

    if (!isBrowser.iOS) { /* Code for anything but iOS */ }


    Of course, this is easily extended for other devices / combination of devices.

    ReplyDelete
  6. Stephen TranJanuary 5, 2012 at 1:26 AM

    thanks for this blog. I found much greate info from here
    Thnks again :)

    ReplyDelete