How do I load one style sheet for mobile devices and one for desktops?

Question

The reason I'd like to do this is we have dropdown menues on our "desktop version" that i'd like to hide (because they don't work very well on a touch screen device) and show a simplified menu with just the "basic" links.

I can't make Media Queries work when detecting a device because the resolution is too high on some of them (Samsung Galaxy S3 for example).

Is there a Javascript or something I can use? Something like (I don't know Javascript so this is just the idea):

if mobileDevice then load mobile.css
else
load desktop.css

Just the basic idea :-)

Answer 1

Use media attribute specific to the screens like

<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen" />

And for handheld devices you can use this

<link rel="stylesheet" media='screen and (min-width: 200px) and (max-width: 400px)' href='stylesheet.css' />

OR

<link rel="stylesheet" type="text/css" href="stylesheet.css" media="handheld" />

Or use @media queries to target specific screen resolutions if you want than you can simply have 1 stylesheet but you can define styles for different screens like this

@media screen {
      /* Styles for screen goes here */
}

@media print {
      /* Styles for print goes here */
}

@media all and (min-width: 600px) {
  /* Styles for specific screen resolutions */
}