How do I add iPhone / iPad detection using Javascript?

Question

I want to add a condition on my website if the browser is from iPhone/iPad to have some specific behavior like when a button is clicked to display a div.

Something like :

<script type="text/javascript">
/* iPhone scripts */
<?php if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')){ ?>
    // window.addEventListener("load",function() {
    // setTimeout(function(){
    // window.scrollTo(0, 1);
    // }, 0);
    // });
   jQuery(document).ready(function() {
}
});

This is just what I've found but I'm not sure this is the way to do it.

The solutions listed are great for detecting between an iPad or an iPhone, I would also like to point out that you can detect variations in AvaliableWidth to go even further in checking the difference between things like an iPad vs and iPad mini or the built in safari web-browser vs. an app on iOS that has a different browser window size... See the second highest rated solution here: https://stackoverflow.com/questions/13248493/detect-ipad-mini-in-html5 — Albert Renshaw, Feb 18 '13 at 04:55

score 6 · Answer 1 · answered Jun 23 '12 at 15:24

What I use is this:

function UtilityHasTouch() {    

    var agent   = navigator.userAgent;

    if ( agent.match(/(iPhone|iPod|iPad|Blackberry|Android)/) ) {
        return true;
    }

    try {
        document.createEvent("TouchEvent");
        return true;
    } catch (e) {
        return false;
    }
}

score 1 · Answer 2 · answered Jun 23 '12 at 01:50

I recommend using modernizr for feature detection rather than relying on home cooked browser detection. With Modernizr, you can detect whether or not a browser supports touch events with just a simple if statement

if (Modernizr.touch)

resulting in detection for all mobile and tablet browsers.

How do I add iPhone / iPad detection using Javascript?

2 Answers2