How to avoid loading CSS file for ipad sized devices ('between' mobile and full-sized)?

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

How about using mediaqueries?

• http://www.alistapart.com/articles/responsive-web-design/
• http://www.w3.org/TR/css3-mediaqueries/

You can use them to target devices with width less then 800px for example. It will work on most modern mobile browsers.

To make css apply only to mobile version, I personally prefer creating namespaces to adding/deleting css-files.

For example:

1. You write all rules in the handheld.css as ".handheld .classname".
2. For mobile version you add class ".handheld" on body.

It is also useful to create non-js versions of the pages: You have class ".nojs" on body by default, and on load removing it by Javascript (if it is enabled).

Answer 2

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)