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.

In this post you will learn how to detect iPhone/iPod using javascript/jQuery, redirect your iPhone users to mobile version of your site using javascript and alternative and better way to redirect your visitors using server-side PHP code snippet.

The latest buzz around jQuery is upcoming jQuery mobile – support for mobile devices. Current jQuery core work fine on iPhone and iPod touch browsers and most of us have created a mobile version of our websites, developed or converted websites for others. Basically, jQuery is already being used on iPhone and iPod touch devices. Without any further ado…

Javascript code to detect iPhone and iPod browsers

// Return boolean TRUE/FALSE
function isiPhone(){
    return (
        (navigator.platform.indexOf("iPhone") != -1) ||
        (navigator.platform.indexOf("iPod") != -1)
    );
}

You might wonder why do we even need to detect if our website is ran on iPhone Safari or normal desktop Safar if jQuery works fine on both. Well, there are Safari specific CSS features that you might want to utilize and you need to know if the current browser is Safari, then you may also want to consider reducing resource consuming features like animations for iPhone version of your site.

Redirecting iPhone & iPod users

You may also use this script to redirect iPhone and iPod users to your website’s mobile version:

// Redirect iPhone/iPod visitors
function isiPhone(){
    return (
        (navigator.platform.indexOf("iPhone") != -1) ||
        (navigator.platform.indexOf("iPod") != -1)
    );
}
if(isiPhone()){
    window.location = "mob.example.com";
}

For example: if your website is www.example.com and you have a mobile version at mob.example.com, then put the following script to your www.example.com.

Redirect iPhone users using PHP

It is better to detect and redirect your iPhone users on the server-side. Here is a PHP code to redirect iPhone users:

// Redirect iPhone/iPod visitors
if(strpos($_SERVER['HTTP_USER_AGENT'], 'iPhone') ||
   strpos($_SERVER['HTTP_USER_AGENT'], 'iPod')){
      header("Location: http://mob.example.com");
}

User agent strings for your reference:

/*
User Agent String for iPhone
    Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko)
    Version/3.0 Mobile/1A543a Safari/419.3
    
User Agent String for iPod Touch
    Mozilla/5.0 (iPod; U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML, like Gecko)
    Version/3.0 Mobile/3A101a Safari/419.3
*/

As final words, I would like to remind you that sometimes your visitors would not like to be redirected to mobile versions of your websites. That’s why your mobile version should always include a link to your non-mobile website. The above scripts can be rewrote to check if user has chosen not to be redirected. Either set cookie or a URL parameter.

If you want to download jQuery Mobile source code and look into it just like everybody else, we are all out of luck :(  As I mentioned in my previous post jQuery mobile facts, the source code will be available in October this year.

The jQuery Mobile source will not be in a separate jquery.mobile.js file. It will be right in the jQuery core. This means that jQuery team is fixing and improving jQuery core so that it works nicely in all major mobile phones and devices.

By the way, if you want to keep track of the jQuery mobile source code and be the first one to download it, when it is available, you should watch jQuery on GitHub.

The big part of the upcoming jQuery mobile is new UI components that work and render nicely in all mobile devices and degrade gracefully. So, keep an eye on jQuery UI as well. Here is the jQuery UI GitHub page.

Meanwhile you can read all jQuery mobile facts here.

jQuery Mobile is an attempt to create a javascript framework that would work on all major mobile browsers. In this post I will try to lay down all the facts that I could find about jQuery Mobile, so that you are up to date.

jQuery team has mentioned that they were planning and started to work on jQuery for Mobile devices when they announced jQuery 1.4. John Resig said that they already had different mobile devices from sponsor for testing purposes. Anyway, jQuery Mobile is officially announced now, but there is a very little information about it.

Here are some facts that I found:

1. jQuery Mobile will be in core, NOT as a separate distribution like jquery.mobile.js
2. jQuery UI team will improve current jQuery UI and develop new mobile components (initial designs).
3. Release of the jQuery Mobile and new jQuery UI components is planned for October 2010.
4. As of writing of this post, jQuery Mobile source code is not available. The code will be pushed to the jQuery core’s GitHub repository and announced on the official jQuery mobile page.
5. You can help jQuery Mobile project by testing jQuery core on your mobile devices at TestSwarm.

That’s all I could find on jQuery Mobile for now. Subscribe to my RSS or follow me on Twitter to stay updated about news related to jQuery Mobile.