Switch between screen and mobile view

Some days ago I started to redesign my freelancer website for mobile phones. Therefore I needed a simple and fast way to switch between two css styles. I decided at the beginning, that I just want to use two different css files and don’t do a complete rewrite of the page for mobile devices. The easiest way was to include the following part included in <script>...</script> tags into the <head>...</head> section of my website.

< script >
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
    /*window.location = "http://m.thescom.de";*/
    var cssUrl = "media/css/handheld.css";

    var head = document.getElementsByTagName("head")[0];

    var link = document.createElement("link");

    link.rel = "stylesheet";
    link.type = "text/css";
    link.href = cssUrl;

    document.head.appendChild(link);
} else {
    var cssUrl = "media/css/style.css";

    var head = document.getElementsByTagName("head")[0];

    var link = document.createElement("link");

    link.rel = "stylesheet";
    link.type = "text/css";
    link.href = cssUrl;

    document.head.appendChild(link);
}
< / script >

You can also see the code snipped as a github gist.

comments powered by Disqus