How to load a custom stylesheet for 2 useragents?

[pxlcreations]

I have two user agent strings:


Mozilla/5.0 (iPad; CPU OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3

Mozilla/5.0 (iPad; U; CPU OS 4_3_2 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8H7 Safari/6533.18.5

The first targets iOS5 and the second targets iOS4.

Is it possible to load a custom stylesheet for the first user agent string, then a different one for the later user agent string?

[jscheuer1]

User Agent strings don't target anything.

But if you can determine the salient differences between these strings and others as well as between each other, you can load different stylesheets based upon them.

Without testing I imagine this should work:


;(function(){
var ua = navigator.userAgent, osv, style5 = 'ioss5.css', style4 = 'ioss4.css';
if(/ipad/i.test(ua)){
osv = /cpu os (\d+)/i.exec(ua);
if(osv && osv[1] == 5)){
document.write('<link rel="stylesheet" href="' + style5 + '" type="text/css">');
} else if (osv && osv[1] == 4){
document.write('<link rel="stylesheet" href="' + style4 + '" type="text/css">');
}
}
})();

Configure the style5 and style4 variables to the stylesheets of your choosing.