I'm making my site more responsive to various devices (tablet/mobile/etc) and I'm wondering if I use the following as a guide for various layout widths if the last stylesheet is a valid cross browser "catch-all", more specifically IE5/6/7. Does anyone know if older browsers will ignore all sheets and include only that last one?
<link media="only screen and (max-device-width: 480px)" href="small.css" type= "text/css" rel="stylesheet">
<link media="only screen and (min-device-width: 481px) and (max-device-width: 1024px)" href="medium.css" type="text/css" rel="stylesheet">
<link media="screen and (min-device-width: 1025px)" href="large.css" type="text/css" rel="stylesheet">
OR
#media only screen and (max-device-width: 480px) { /* CSS */ }
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) { /* CSS */ }
#media only screen and (min-device-width: 1025px) { /* CSS */ }
If you are thinking of using IE Specific Stylesheets, use Conditional Comments.
In your case, it can be done as:
<!--[if IE 5]><link media="only screen and (max-device-width: 480px)" href="small.css" type= "text/css" rel="stylesheet"><![endif]-->
<!--[if IE 6]><link media="only screen and (max-device-width: 480px)" href="small.css" type= "text/css" rel="stylesheet"><![endif]-->
<!--[if IE 7]><link media="only screen and (max-device-width: 480px)" href="medium.css" type= "text/css" rel="stylesheet"><![endif]-->
<!--[if GT IE 7]><link media="only screen and (max-device-width: 480px)" href="large.css" type= "text/css" rel="stylesheet"><![endif]-->
If you wanna implement the #media queries for older browsers, there are many JavaScript fallbacks for the same.
css3-mediaqueries-js
css3-mediaqueries.js by Wouter van der Graaf is a JavaScript library to make IE 5+, Firefox 1+ and Safari 2 transparently parse, test and apply CSS3 Media Queries. Firefox 3.5+, Opera 7+, Safari 3+ and Chrome already offer native support.
Get it at Google Code.
Adapt.js - Adaptive CSS
Adapt.js is a lightweight (848 bytes minified) JavaScript file that determines which CSS file to load before the browser renders a page. If the browser tilts or resizes, Adapt.js simply checks its width, and serves only the CSS that is needed, when it is needed.
Get it at GitHub.
Enquire.js – Media Query Callbacks in JavaScript
Enquire.js is a lightweight, pure JavaScript library for handling media queries. It is less than 1kb when GZIP'd and minified, and has absolutely no dependencies. Yup, you read that right - no dependencies, not even jQuery! The most you will have to do is provide a matchMedia polyfill if you wish to support browsers without a native implementation.
Get it at GitHub.
Related
In a website, I use a media query for small devices, effective for screen resolutions <=980px.
Problems is: on the iPad, in horizontal view (1024px), the css file is applied.
Why is that?
On the desktop (Firefox), I don't have this problem. I tried changing to max-device-width, no difference.
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="medium.css" media="(max-width:1150px)">
<link rel="stylesheet" href="mobile.css" media="(max-width:980px)">
Thanks for the answers so far.
To be clear: I am not looking for a way to target the iPad. I am looking for the reason behind the iPad's behaviour. It's screen has a width of 1024px, but it applies a stylesheet it should not. Why?
Edit:
I found the problem/solution. See below.
try to create the media query within a seperate CSS stylesheet, which will automatically detect what size the viewport is.
This site is a really good one:
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Use this media query to to target all iPad versions (iPad 1-5 & Mini).
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.css" />
Additionally, check out the solution posted for this problem.
you don't have to create additional CSS file for this just use this and add your code
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
----CODE HERE----
}
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
----CODE HERE----
}
The iPad browser works with the following information:
width and device-width: 768 px
height and device-height: 1024 px
The orientation of the device does not matter in regard to which value is height and which one is the width!
That means in landscape mode, the browser promotes width = 768 px
In my opinion, this is a bug. The 'width' property should contain the width of the browser window.
Now I use the following media query on the website:
<link rel="stylesheet" href="mobile.css" media="(max-device-width:768px) and (orientation:portrait), (min-device-width:769px) and (max-width:980px)">
That works very well.
This question already has answers here:
Why are my CSS3 media queries not working on mobile devices?
(23 answers)
Closed 9 years ago.
I keep trying to do a media query in my CSS doc doing something like:
#media screen and (max-device-width: 480px) { /*css here*/}
but it won't work when I test it on an iPhone. I've tried changing the sizes and using the portrait/landscape feature, but still nothing. What am I doing wrong?
Check that you have
<meta name="viewport" content="width=device-width, initial-scale=1.0">
in the head of your doc
I always call mine when I link the CSS in the head of the HTML.
An example from a current page I'm working on:
<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 320px) and (max-device-width: 500px)" href="css/mobile.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 501px)" href="css/main.css" />
This selects the CSS doc that will be loaded right from the start instead of selecting styles after the CSS document is loaded (reduces number of HTTP requests)
When doing this within the CSS document itself, you should generally replace max-device-width with max-width.
this is a samples media query css
/************************************************************************************
smaller than 980
*************************************************************************************/
#media screen and (max-width: 980px) {
your css here
}
/************************************************************************************
smaller than 650
*************************************************************************************/
#media screen and (max-width: 650px) {
your css here
}
/************************************************************************************
smaller than 560
*************************************************************************************/
#media screen and (max-width: 480px) {
your css here
}
Hard to understand as you have not provided the code..but the common mistake people do it by not adding this meta data
<meta name="viewport" content="width=device-width, initial-scale=1">
Use "max-width" instead of "max-device-width" which is fixed per device.
I'm not sure but I think the max-device-width of an iphone is 640px. Give it a try.
#media only screen and (min-width : 480px) {
}
It seems to work fine in both Android and iPhone.
I have a css file that I want him to be used only if the viewport is 1024 and higher.
how can I declare my css file to be loaded only and based on a viewport i'll decide about?
You can use the media attribute.
<link rel="stylesheet" media="screen and (min-device-width: 1024px)" href="style.css" />
Another solution:
<style>
#media only screen and (min-device-width: 1024px)
{
Whatever you want for css...
}
</style>
I'm trying to create a responsive website. The design has 3 breaks, at 480px, 768px and 1024px. My link-section in the document head looks like this:
<link media="only screen and (max-device-width: 479)" href="320.css" type="text/css" rel="stylesheet" />
<link media="only screen and (min-device-width: 480) and (max-device-width: 767)" href="480.css" type="text/css" rel="stylesheet" />
<link media="only screen and (min-device-width: 768) and (max-device-width: 1023)" href="768.css" type="text/css" rel="stylesheet" />
<link media="only screen and (min-device-width: 1024)" href="1024.css" type="text/css" rel="stylesheet" />
The problem with this is, that legacy devices that do not understand media queries don't load any of the style sheets.
Is there any way to include a stylesheet that is recognized only by devices that do not support media queries, like old Internet Explorers?
I would rather not include this stylesheet for all browsers and then reset or override it.
Thanks,
Jost
Just for tests and learning css3 i am trying to create small mobile website. But for now I have small problem with targeting stylesheets. I'm doing it in such way:
<link rel="stylesheet" media="only screen and (max-width: 180px)" href="xsmall.css" />
<link rel="stylesheet" media="only screen and (min-width: 240px)" href="small.css" />
<link rel="stylesheet" media="only screen and (min-width: 320px)" href="medium.css" />
<link rel="stylesheet" media="only screen and (min-width: 480px)" href="large.css" />
<link rel="stylesheet" media="only screen and (min-width: 540px)" href="wide.css" />
Unfortunatelly after changing xsmall.css change is visible also in other web versions ( so for 480px, 540 px etc ). I test websites (mobile one) on Opera Mobile Emulator. What I'm doing wrong?
thanks
What you are doing wrong is to think that your stylesheet selection includes only one of the style sheets.
A style sheet that you include with min-width will be included for any resolution that is larger, so if I for example have a 600px wide screen, I will get small.css, medium.css, large.css and wide.css, not only wide.css.
(Also, if I have a 200px wide screen, it would not include any style sheet at all...)
You would need to use both min-width and max-width to make it only include one of the style sheets.