CODEWITHSUNDEEP
css
rensaskiten
rensaskiten

Reputation: 71

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

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

Upvotes: 5

Views: 9673

Answers (3)

rensaskiten
rensaskiten

Reputation: 71

I found a couple of code "snippets" and I wonder if they could be combined into a working script?

if(Browser.Platform.name == 'android' || Browser.Platform.name == 'ios') window.location = dir+mobileFolder+"/index.html"+page;

//*** Could the above be combined with the below in some way? ***

function loadcssfile(filename, filetype){
// if (filetype=="css"){
  var fileref=document.createElement("link")
  fileref.setAttribute("rel", "stylesheet")
  fileref.setAttribute("type", "text/css")
  fileref.setAttribute("href", filename)
 }
 if (typeof fileref!="undefined")
  document.getElementsByTagName("head")[0].appendChild(fileref)
//}

loadcssfile("stylesheet.css", "css")

Upvotes: 2

brightboy2004
brightboy2004

Reputation: 268

Try this:

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

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157294

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

Upvotes: 8

Related Questions