User Agent Detection For Apple Devices

If your developing a mobile website at some point you will ask yourself, “how do i redirect the user based on what device there using?”. Its easy and I’ll show you how.

In Blog, Mobile Development

What’s A User-Agent

Sometimes it’s necessary for a web site to understand how it is being viewed, so most user agents identify themselves by sending a User Agent String to the web site. (A string is a series of characters, usually letters and numbers.) If you want to view your user-agent head here.

Redirecting Using Javascript

Detecting and redirecting for an iPad.

1
2
3
4
5
<script type="text/javascript">
  if ( (navigator.userAgent.indexOf('iPad') != -1) ) {
    document.location = "http://www.yourwebsite.com/ipad-version.html";
  }
</script>

Detecting and redirecting for an iPhone.

1
2
3
4
5
<script type="text/javascript">
  if ( (navigator.userAgent.indexOf('iPhone') != -1) ) {
    document.location = "http://www.yourwebsite.com/iphone-version.html";
  }
</script>

Detecting and redirecting for an iPod.

1
2
3
4
5
<script type="text/javascript">
  if ( (navigator.userAgent.indexOf('iPod') != -1) ) {
    document.location = "http://www.yourwebsite.com/ipod-version.html";
  }
</script>

Detection For Android

Thanks to Dylan

1
2
3
if ( (navigator.userAgent.indexOf(‘Android’) != -1) ) {
 document.location = “http://www.yourwebsite.com/android-version.html”;
 }

Redirecting Using .htaccess

Detecting and redirecting for an iPad.

1
2
3
4
RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} iPad
RewriteCond %{REQUEST_URI} !^/my-iPad-site/
RewriteRule .* /my-iPad-site/ [R]

Detecting and redirecting for an iPhone.

1
2
3
4
RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} iPhone
RewriteCond %{REQUEST_URI} !^/my-iPhone-site/
RewriteRule .* /my-iPhone-site/ [R]

Detecting and redirecting for an iPod.

1
2
3
4
RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} iPod
RewriteCond %{REQUEST_URI} !^/my-iPod-site/
RewriteRule .* /my-iPod-site/ [R]

Detection For Android

Thanks to Dylan

1
2
3
if ( (navigator.userAgent.indexOf(‘Android’) != -1) ) {
 document.location = “http://www.yourwebsite.com/android-version.html”;
 }

Conclusion

Thanks for taking part in this code snippet, if you have any questions feel free to post them up on our Facebook Fan Page Or Tweet them via twitter @photoshop_plus.

  1. August 6, 2012 at 8:02 PM

    if ( (navigator.userAgent.indexOf(‘Android’) != -1) ) {
    document.location = “http://www.yourwebsite.com/android-version.html”;
    }

    shouldn’t be missing ;)

  2. Wilma Hamlin
    August 6, 2012 at 8:30 PM

    Thanks :)

    appreciated the comment. I’ll add it to the list cheers

  3. August 10, 2012 at 9:10 AM

    If you want full coverage of all devices this collection of scripts might help:
    http://detectmobilebrowsers.com/

Give Us Your Feedback

Here on Photoshop Plus we use something called Gravatar, its a little image which will appear next to your name when you comment on a blog. Using a gravatar will help us recognise genuine comments from the spam comments.


Don't forget to leave a comment on this post, we appreciated your feedback good or bad.

There's currently 3 Comments On User Agent Detection For Apple Devices, why not add yours!

Leave a Reply

Your email address will not be published. Required fields are marked *

Auto Scroll To The Top
css.php