Changing style sheets depending on useragent

<script language="Javascript">
var deviceIphone = "iPhone";
var deviceIpod = "iPod";

//Initialize our user agent string to lower case.
var uagent = navigator.userAgent.toLowerCase();

//**************************
// Detects if the current device is an iPhone.
function DetectiPhone()
{
   if (uagent.search(deviceIphone) > -1)
   {document.write('<link rel="stylesheet" type="text/css"       href="ui/mobile/css/site.css">');
}   

etc...

Above is the start of my code. I am trying to change the CSS file depending on what platform the user is using. I currently use media="screen ... " but it doesn't work with the amount of platforms I'm trying to use. I need something a lot more detailed/complex that is why I'm turning to useragents.

Any ideas why the css file doesn't change on my iPhone using the above code?

Better yet, any ideas on another way to change style sheets depending on the users platform/screen resolution?

Answers:

Answer

Try this :

if(navigator.userAgent.match(/iPhone/i)){
    // code
}

match work with regular expression. Flag "i" indicate case insensitive ;)

Answer

Perhaps the code above doesn't work because you are converting the UA string to lowercase, but your target device strings are camelCased :)

The search() function is case sensitive by default

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.