CODEWITHSUNDEEP
htmlcss
Ivan
Ivan

Reputation: 15912

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

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?

Upvotes: 7

Views: 1008

Answers (3)

Cory Danielson
Cory Danielson

Reputation: 14501

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)

Upvotes: 1

Alexey Ivanov
Alexey Ivanov

Reputation: 8236

How about using 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).

Upvotes: 4

Calvin
Calvin

Reputation: 8765

You could check the User-Agent header server-side and then determine whether you should serve handheld.css or not. Depending on what your server-side language/framework is in there are numerous libraries that can help you determine the user's device/os/etc. Keeping in mind, of course, that User-Agent can be spoofed. But it should be good enough for most visitors.

Upvotes: 0

Related Questions