Javascript Switch CSS

Permalink November 22, 2012 at 4:45 AM

Hi all,

Quick question. I wanted to add different CSS to the site if the user is on desktop / tablet / mobile phone. I can use the mobile switcher add-on for the mobile and desktop which is fine. I had been using a piece of JavaScript to switch when the user is on an ipad. I placed this is my header.php file.

However, this does not work when incorportated as a concrete 5 theme.

Any ideas? Or could you point me in the right direction?

Thanks in advance :D

<script type="text/javascript">
   if((navigator.userAgent.match(/iPad/i))) {
      document.write("<link type=\"text\/css\" rel=\"stylesheet\" media=\"all\" href=\"ipad.css\" charset=\"utf-8\" \/>");
      document.write("<meta name=\"viewport\" content=width=768px, minimum-scale=1.0, maximum-scale=1.0 \/>");
   }
   else if(navigator.userAgent.match(/iPhone/i)) {
      document.write("<link type=\"text\/css\" rel=\"stylesheet\" media=\"all\" href=\"ipad.css\" charset=\"utf-8\" \/>");
      document.write("<meta name=\"viewport\" content=width=device-width \/>");
   }
   else
   {
      document.write("<link type=\"text\/css\" rel=\"stylesheet\" href=\"main.css\" \/>");
   }
   </script>

adajad replied on Nov 22, 2012 at 6:05 am Permalink Reply

Why not use media queries instead?

Anyway, your are pointing to the wrong css location in your javascript, and since you can't use php inside js you need to use json_encode() (http://php.net/manual/en/function.json-encode.php) to use the theme path from the c5 specific: