*edit it figures, no matter how long you rip hair out and gnash teeth, the moment you post something and then go back to try to play with the problem more, you either discover the answer or accidentally fix it. I have no idea what made it work but suddenly it does (using exactly what I could have sworn I typed in the first 100 times).
So disregard this whole post, I can’t delete it.
Hello all,
I’m redoing a site (yay I get to redo how it looks this time). I thought I’d go ahead and use media queries for the devices who understand them to let the page squish real small and all that.
Thing is, they work great on my desktop browsers when I have
@media and (max-width: somethingsmall) {
special stuff for when it’s small;
}
in my CSS sheet.
However after flipping through this awesome set of slides by Bryan Reiger I thought I would also try to do it “backwards”: mobile first, then progressively enhance for desktop.
Since many mobiles don’t support media queries, the idea is to have a sort of default stylesheet with stuff that would work on mobile, then use media queries to call another stylesheet for Desktop with more background images and widths and floats and things.
So I tried that:
<link rel="stylesheet" type="text/css" media="screen, projection, handheld" href="scooter.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width: 600px)" href="desktop.css">
I’ve done various permutations of this. Nothing works in my desktop browsers… it’s like they’re acting like IE, just loading the desktop.css regardless of device width (and I’ve tried it with and without the “device” part (min-device-width) and also without the
<meta name=“viewport” content=“width=device-width”>
meta tag I’ve got as well. Also, strangely, within a single stylesheet things are not cascading correctly (when they did when I just had @media in the stylesheet instead of in the link tag), such as
a:visited
is overriding
form label a
Since I’m busy redoing these pages and am actively working on them, I’m not keeping my code this way. It would be nice if it worked on many mobiles but it’s essential that it works on the desktop, and right now my desktop browsers are having trouble with media=“something” .
Am I misunderstanding how these work when called via a link tag ?? I should be triggering different styles based on my browsers’ widths right??
Otherwise, I’ll have to ignore what I learned in the awesome slide show because all of my sites are so far desktop-first, mobile-second (if a site works on mobile but not on desktop it’s not allowed… if it works on desktop but breaks on mobile that is considered acceptable by the boss).
Thanks,
poes