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

Question

I have an application that looks good on screens, but has a rigid structure that makes it difficult to use on mobile phones, etc. Therefore, I made a special CSS file for these devices. This is normal, I use main.css, which determines the general view (for all media) and the handheld.css file, which makes corrections for such 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, such as the iPad, look great with the overall version of the screen and do not need to be downgraded, as on some mobile phones. So I installed a link in my application that sets a cookie that displays like on the desktop. The problem is that I do not know how to make handheld.css not load. Maybe Javascript? But how?

Answer 1

I think you are looking for media queries . This will not solve your question, but it is in this case that you must solve the problem of a larger size (layout corresponding to different screen sizes) in the future.

Example : http://www.barackobama.com/ (change the page width to see what it does)
Find out 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 CSS switching website :
http://jsfiddle.net/y6FWK/2/

This is something new for me ... I did not expect it to work so easily, but since <link> is another dom element, you can just reference it (the easiest way is to give it an identifier) ​​and just change its href value ... I was surprised.

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

Then some buttons to change css ... or what you would like

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

Then in your code:

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

To my surprise, it really worked .

Tested and works in

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

Answer 2

How about using media queries?

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

You can use them to target devices with a width of less than 800 pixels. It will work on most modern mobile browsers.

To make css applicable only to the mobile version, I personally prefer to create namespaces for adding / removing css files.

For example:

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

It is also useful to create non-js versions of pages: by default, you have the .nojs class, and when loading, Javascript (if it is enabled).

Answer 3

You can check the User-Agent header server and then determine if you should serve handheld.css or not. Depending on which server / server side there are several libraries that can help you identify the user device / os / etc. Bearing in mind, of course, that User-Agent can be faked. But that should be enough for most visitors.