Question

I have to load a different Stylesheet depending on whether the User Agent is an iPad or other. I know that generally, detecting browsers isn’t the most fantastic idea and will probably cripple our maintainability sometime in the future..not my decision.

So here we have some JavaScript to detect the user agent. It isn’t working. I may have mis-escaped something. The error I am getting is a red herring (object reference), but only shows up when I execute the JavaScript.

    $(document).ready(function () {
        alert('ready fired');
        if (navigator.userAgent.indexOf("iPad") != -1) {
            //alert('bleep bloop blop...iPad detected');
            var stringToWrite = '<script src=\'\<\%\= ResolveUrl("~/Scripts/iscroll.js") \%\>\' type="text/javascript"><\/script>';
            stringToWrite += '<link href=\'\<\%\= ResolveUrl("~/Stylesheets/scrollbar.css") \%\>\' rel="stylesheet" type="text/css" \/>';
            stringToWrite += '<link href=\'\<\%\= ResolveUrl("~/Stylesheets/iPadCommon.css") \%\>\' rel="stylesheet" type="text/css" \/>';
            alert(stringToWrite);
            document.write(stringToWrite);
        }
        //else
        //alert('bleep bloop blop...who cares browser');
    });

Answer 1

You probably should consider detecting the agent on the server side, otherwise it won’t work for browsers which have javascript disabled.