1

I'm working on a website for my Web Design coursework and I'm writing both CSS scripts that will format the site for either a desktop browser or a mobile one, depending on whether the appropriate useragent is detected. I'm able to detect the presence of a mobile browser easily enough and the default CSS is desktop, the problem I have is switching between them. I've been told by the department's resident web programming guru that you should never place Javascript directly into the html file, and that it should all be off in external files, which so far I've been able to stick to.

Now my problem is that I can't find a way to determine which CSS file to load without using inline Javascript. The script I'm using to detect the presence of the mobile browser returns a boolean value depending on the result of checking the useragent, and I would use that to load the appropriate CSS file.

Question: How should I write a Javascript file that will load the appropriate CSS file?

My script for detecting the mobile (Android) browser is:

var deviceAndroid = "android";

function DetectAndroid()
{
   if (uagent.search(deviceAndroid) > -1)
      return true;
   else
      return false;
}
  • Google for "CSS media queries" – Pointy Nov 08 '10 at 15:47
  • I would also suggest you use media queries. Android and also iPhone and iPads support media queries where you can load up a custom stylesheet based on the mobiles screen size. – Scott Nov 08 '10 at 16:00

1 Answers1

0

I think you can do it writing a JS function that finds the and change it as you determine the kind of device that is accessing, you can take a look of such JS here.

You can try as well loading both stylesheets via the tag and add a "media" attribute for the desktop (screen) or mobile (handheld) devices, you can take a look on this stackoverflow post

I hope it helps.

Community
  • 1
  • 1
SubniC
  • 9,807
  • 4
  • 26
  • 33