Take a peek at adapt.js is a lightweight JavaScript file that determines which CSS file to load before the browser renders a page.
Make sure you try respond.js - a fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)
If you want to be able to correctly display a fluid design on multiple resolutions (including mobile) then you will probably use CSS Media Queries. CSS Media Queries are not complicated to use and were introduced by CSS3 specifications as an extension of CSS 2.1 media types.
Note that HTML4 supports media types like handheld, but this is poorly supported, old mobiles don't detect it, the modern devices completely ignore it.
CSS Media Queries work fine on modern browsers (IE9, FF, Chrome, Safari, Opera) and on mobile devices (iPhone, Android, Opera Mobile & Mini, Blackberry, IE Mobile 7, etc.)
And of course they don't work on IE < 9.0, but I have a solution that I'm already using on production servers. I wrote a small JavaScript file that reads all the <link> elements from DOM, checks which of them are destined for the current device resolution and applies them.
...
<head>
<!-- Your .css files. IE6, IE7 and IE8 ignore the media="only all ..." files. -->
<link rel="stylesheet" type="text/css" href="core.css" />
<link rel="stylesheet" type="text/css" href="smartphone.css" media="only all and (max-width: 480px)" id="stylesheet-480" />
<link rel="stylesheet" type="text/css" href="tablets.css" media="only all and (min-width: 480px) and (max-width: 1024px)" id="stylesheet-1024" />
<link rel="stylesheet" type="text/css" href="wide.css" media="only all and (min-width: 1200px)" id="stylesheet-1280" />
<!-- The mighty fix which chooses the correct stylesheet file based on the
screen resolution, and strips the 'media' attribute so IE6, IE7 and IE8
can read/interpret it -->
<!--[if lt IE 9]>
<script type="text/javascript" src="/js/css-media-query-ie.js"></script>
<![endif]-->
</head>
...
Source From: http://ghita.org/tipoftheday/css-media-queries-for-ie
Make sure you try respond.js - a fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)
If you want to be able to correctly display a fluid design on multiple resolutions (including mobile) then you will probably use CSS Media Queries. CSS Media Queries are not complicated to use and were introduced by CSS3 specifications as an extension of CSS 2.1 media types.
Note that HTML4 supports media types like handheld, but this is poorly supported, old mobiles don't detect it, the modern devices completely ignore it.
CSS Media Queries work fine on modern browsers (IE9, FF, Chrome, Safari, Opera) and on mobile devices (iPhone, Android, Opera Mobile & Mini, Blackberry, IE Mobile 7, etc.)
And of course they don't work on IE < 9.0, but I have a solution that I'm already using on production servers. I wrote a small JavaScript file that reads all the <link> elements from DOM, checks which of them are destined for the current device resolution and applies them.
...
<head>
<!-- Your .css files. IE6, IE7 and IE8 ignore the media="only all ..." files. -->
<link rel="stylesheet" type="text/css" href="core.css" />
<link rel="stylesheet" type="text/css" href="smartphone.css" media="only all and (max-width: 480px)" id="stylesheet-480" />
<link rel="stylesheet" type="text/css" href="tablets.css" media="only all and (min-width: 480px) and (max-width: 1024px)" id="stylesheet-1024" />
<link rel="stylesheet" type="text/css" href="wide.css" media="only all and (min-width: 1200px)" id="stylesheet-1280" />
<!-- The mighty fix which chooses the correct stylesheet file based on the
screen resolution, and strips the 'media' attribute so IE6, IE7 and IE8
can read/interpret it -->
<!--[if lt IE 9]>
<script type="text/javascript" src="/js/css-media-query-ie.js"></script>
<![endif]-->
</head>
...
Source From: http://ghita.org/tipoftheday/css-media-queries-for-ie
No comments:
Post a Comment