Question

I have an application that has a good look on screens, but has a rigid framework that makes difficult to use it in mobiles and similar.. So I’ve made an specific CSS file to fit these devices. That’s ok, I use a main.css that defines general looking (for all media) and a handheld.css file that makes corrections for this kind of devices:

<link rel="stylesheet" media="all" type="text/css" href="main.css" />
<link rel="stylesheet" media="handheld,tv" type="text/css" href="handheld.css" />

The problem is that some devices like an iPad have a great looking with the general screen version and don’t need to downgrade like in some mobiles. So I have put in my app a link that sets a cookie that forces to display like in a desktop screen. The problem is I don’t know how to force to not load handheld.css. Javascript may be? But, how?

Answer 1

I think what you’re looking for is media queries. This won’t solve your question, but it is how you should go about solving the bigger problem (layout responding to different screen sizes) in the future.
Example: http://www.barackobama.com/ (resize the width of page to see what it does)

Learn how:

http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
http://www.vanseodesign.com/css/media-queries/
http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.html
http://designmodo.com/media-queries/

To solve your specific problem, read below:
working example of website with css stylesheet switching:
http://jsfiddle.net/y6FWK/2/

This is something new to me… Wasn’t expecting it to work so easily, but, since the <link> is just another dom element, you can just refer to it (easiest to give it an id) and simply change it’s href value… I was surprised.

<link rel="stylesheet" type="text/css" href="" id="cssSwitch" />

Then some buttons to change the css… or whatever you’d like

<input type="button" id="enableMobile" value="mobile css" />
<input type="button" id="enableMain" value="main.css" />

Then, within your code:

$("#enableMobile").on("click", function(){
    $("#cssSwitch").attr("href", "handheld.css");
});

$("#enableMain").on("click", function(){
    $("#cssSwitch").attr("href", "main.css");
});

To my surprise, it actually worked.

Tested and worked in

• IE (8)
• Chrome (15)
• FireFox
• Android Samsung Galaxy S (default browser)