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>