Mobile Browser Detection and Redirects

Responsive web design is a great thing.  It lets you use a single URL for phone/table/desktop browsers and give each user an experience optomized for their device. Sometimes though, you need to present fundamentally different web content to an iOS or Android device. In that case you can use the userAgent string to detect the device type. Here is an example snippet you can use:

    <script>
        var ua = navigator.userAgent;

        var checker = {
            ipad: ua.match(/iPad/),
            ios: ua.match(/(iPhone|iPod|iPad)/),
            blackberry: ua.match(/BlackBerry/),
            android: ua.match(/Android/)
        };
        if (checker.ipad) {
            // if you want to do anything special for iPad users, do it here, otherwise they will see this page as-is
        } else if (checker.android || checker.ios || checker.blackberry) {
            // they have a (non-ipad) mobile device, let’s offer them a redirect
            if (confirm(“Would you like to use the mobile optomized web site?”)) {
                document.location = “http://www.example.com/mobile/default.htm”;
            }
        }
 
    </script>

One response to “Mobile Browser Detection and Redirects

  1. You can go one step further and Take a RESS approach (REsponsive design & Server Side detection). Using a device detection repository such as 51Degrees.mobi for true device detection. Easily allowing you to detect the individual hardware devices of your users as well as their browsers and operating systems. Updated weekly so you’ll never need to worry about new devices not being detected correctly. It will also improve performance as the processing doesn’t need to be performed by the client.

Comments are closed.