How to change CSS based on mobile device?

Question

In the following example, I want to display only one div, depending on the device.

I\'m familiar with how to use @media to override a CSS cla

Answer 1

Hm i think its easier to create 2 or more css files and load them via javascript based on the device. Something like that inside the onload function:

var cssPath = "standard.css";
if (navigator.platform == "iPad")
    cssPath = "iPad.css";

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

fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", cssPath);

document.getElementsByTagName("head")[0].appendChild(fileref);

Shorter and more readable css files easy to exchange.