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

css

Solution

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 */
}

Problem

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 :-)

Original source