Detecting The Awesomeness That Is Mobile Safari

Published 26/12/2008 at 7:12 PM, updated 25/07/2010 at 2:02 PM (GMT)

For Christmas I got an iPod touch - and I can't believe how awesome it is. Not one to go for the clickywheel on the other traditional iPods, I decided that I would support Steve Jobs in his mission to abolish buttons by asking Santa for an iPod Touch. Pah, iPhones are too expensive.

I also adore Mobile Safari, so much so in fact that I created a small PHP and JavaScript function to detect whether the user is using an iPod Touch or an iPhone to browse your site. I felt that I needed to write one because Mobile Safari seemed to break my site design with weird font sizes, so I removed the comments section and made my homepage slightly more compact just for users sporting a shiny Mobile Safari user agent.

Two functions to detect Mobile Safari in different ways:

The PHP Function

Offering server side awesomeness, this is probably the best technique for detecting mobile Safari if you use PHP for your site.
function ismobilesafari(){
    if(preg_match('/iPod/',$_SERVER['HTTP_USER_AGENT'])){return true;}
    if(preg_match('/iPhone/',$_SERVER['HTTP_USER_AGENT'])){return true;}
    else{return false;}
}

Example usage, to echo a message to the user:

if(ismobilesafari()){
    echo("It's mobile safari.");
}else{
    echo("Nope, it's another browser.");
}

The JavaScript Function

The client side coolness still works, except some weird people disable JavaScript on their iPod/iPhone, so might not work 100% of the time.
function ismobilesafari(){
    if(navigator.userAgent.indexOf('iPod') != -1){return true;}
    if(navigator.userAgent.indexOf('iPhone') != -1){return true;}
    else{return false;}
}

Example usage, to echo a message to the user:

if(ismobilesafari()){
    document.write("It's mobile safari.");
}else{
    document.write("Nope, it's another browser.");
}

Screenshotz

Both of the functions + examples above will result in the following:

  

Add a Comment

Comment (No HTML, URIs are automagically made clickable)