I can see that the first thing I need to clear-up is my definition of just what a Media Query is…
So, is this a Media Query (in a link)
media=“screen, projection, handheld”
…and this not a media query?
media=“screen”
When is media=“” a query and when isn’t it or when does it become one?
There are basically 2 media thingies (and it’s prolly stupid of me to call them all “media queries”): there’s the [i]media types[/i] from CSS2 which most browsers support (so, IE even knows the difference between “screen” and “print” for example);
…and then there’s the newer CSS3 media [i]queries[/i] which have additional constraints (min/max width, orientation, color, etc). These are slowly getting supported by more and more browsers, but older browsers don’t support these (unless you use a Javascript that reads these media queries for the browser). It makes sense: these newer media queries weren’t in the specs when some of these older browsers were made.
I didn’t know that some iPhones don’t pick-up Media Queries. 
I dunno, I thought all iPhones picked up media queries, they just don’t always get some of the other meta tags correct (ppk from quirksmode.org has been testing mobiles for a while and he’s noticed that trying to set “device-width” to something isn’t done correctly). More importantly, most other phones don’t pick up media queries, though this partially has to do with the browser they’re using (Opera Mini and Mobile and the multiple versions of Webkit out then tend to support, but the phone I believe has to correctly report its dimensions to the browser).
I have to take things one step at a time, once I ‘get a grip’ on something simple then I can add a bit more to it. The way I’m starting to think is that it just might be best for me to think in this simple way until I get going…
The reason I only have two sizes (under 600 and over 600) is because I’m not all that comfortable with these media queries, and while I have colleagues with different phones, I’m not a phone user myself so I hateses teh testings.
1). A fluid style sheet <link> Including the words ‘handheld’ that all devices and browsers would pickup if it were not for additional <links>. Thus this will be picked-up by all simple small screens and devices.
No, browsers will pick it up ANYWAY. So, everyone gets this stylesheet! Meaning your following stylesheets are smaller and build on this single stylesheet.
2). Then a <link> that will pickup everything greater than 320px which will start to pickup all the iPhones.
Nah, throw this together with your first one. Unless you’re making a stylesheet for 100px-wide phones? You can aim for that in your “small-everything” stylesheet, but for instance I have form selects which are wider than 100px… I can’t not have a scrollbar for those folks anyway. I’m sure it’s hell surfing teh interwebz on those phones anyway.
3). Then the next will pickup everything over 960px which shouldn’t pickup any iPhones but all iPads and computer screens,
So long as you keep device-width meta tag, you’d be good. The iPhone4 has a resolution of 960px, but if you have that meta tag, then it knows to look for your actual PIXEL settings in your media queries. Cause you don’t want the iPhone4 to think it can handle your 960px-wide web page.
Oh, one final thing…whats with the…
<meta name=“viewport” content=“width=device-width”> thing, what does it actually do?
That’s what it does: tells the browser to see your (min-width: 960px) as device pixels and not resolution (the iPhone 4 definitely does not have 960 pixels in width, but does have 960px-worth of screen resolution).
There’s also
<meta name=“viewport” content=“width=480px”> or whatever but as I said, ppk has discovered that not a single iPhone reads that correctly… some will turn that to “320px” and others… who knows…
4). And maybe another…say greater than 2000px for TV’s.
Don’t torture yourself unless you did something really, really bad.
5). An conditional to pick-up IE8 and below.
Which is easy if you just have the “small-screen” css (IE will get that one because it has no media queries on it, only media types… and IE does not understand handheld or projection but it DOES know screen) and a 960px one (so you’d sent the 960px stylesheet to IE6-8 without the min-width stuff) but know that this means desktop users with modern non-IE browsers will be getting your small-screen styles if they’re on a 800px monitor (then again, I like to think those people are also IE6 users, but actually this isn’t any more likely to be true).
If done in that order, if the browser/device qualifies for the next link down it will move on, if not it’ll use the last it qualifies in.
Nah they cascade.
This is why I do this:
<link type=“text/css” rel=“stylesheet” href=“somecss.css” media=“screen, projection”>
<link type=“text/css” rel=“stylesheet” href=“print.css” media=“print”>
While other people do this
<link type=“text/css” rel=“stylesheet” href=“somecss.css” media=“all”>
<link type=“text/css” rel=“stylesheet” href=“print.css” media=“print”>
I do it my way because I don’t want to have to undo all my screen stuff for print. That’s more code and I’m lazy. I’d rather write less code. Since the latter says “all” (or if you don’t mention a media it’s “all”), then that stylesheet gets into the cascade of the next stylesheet, print. They all meet each other.
So what’s happening in my styles is, everyone is getting the small-screen css and then the desktop.css is building on top of that (and undoing some things which I did specifically for small screen like more padding on buttons etc). It’s not that a browser will abandon its last stylesheet when it comes across a newer, shinier one… it’s that it will continue to “add” stylesheets to its total styles and will skip over the ones that have a media query that the browser knows it does not match (so we are using media queries to exclude new sheets, instead of using them to add new sheets).
…and that is what those slides are saying. Let only those who understand media queries get the desktop css; by doing this, we avoid the bunch of mobiles who don’t know media queries, while then only having to deal with any desktops (and above) who don’t understand them. Which is possibly easier to detect via server as well (since all the possible combinations of phones and PDAs and mobile OSes etc is huge and growing).
of computers use 1024 X 768 and above.
