I mean it seems to me like this makes the media queries intended purpose somewhat useless considering that all of the data (images and all) for the desktop version of a site need to be downloaded on to a mobile device.
Am I missing something?
- Good question. I have no idea, but it is times like this I wish I could up vote questions as well as answers. +1
- Thanks man! :)
- I mean really that's just dumb, unless you're a telco I guess...if the sites are larger than you can always charge people more for visiting them.
2 answers
point
The (theory) of why
So, I'm going to start this off by being blunt. I don't know why mobile browsers do it. In searching, I was trying to find an article from some at least semi-official source as to their reasoning (there are bugs that are sort of related Gecko, Webkit 1 and 2) but didn't have any real luck.
But if I had to guess, it is likely because media queries are handled by the rendering engine, which is in theory independent of platform being used. Mobile Safari uses Webkit, Mobile FF uses Gecko, Opera uses Presto, etc. These are developed to be used independent of that, and so a rendering engine has no way of knowing what it will or could possibly need. For all it knows, it is a mobile now, but maybe it won't be a little later. Or, a more practical example is, it maybe be less that 460px wide now, but what's to say it won't be bigger. It will load all of the content it thinks might be used at some point and go with that.
But that doesn't solve your problem...
Likely the real question at the heart of this is, what can we do about it? And there are a few things.
First, is to explicitly set backgrounds to exist only in the resolutions in which you want them. So,
@media (max-width: 800px) {
body {
background-image: url(image.jpg);
}
}
@media (min-width: 801px) {
body {
background-image: url(image-highres.jpg);
}
}
And that will prevent loading in iOS, though apparently not in Android (last I knew).
The more practical method I think is to use Modernizr 2, which has support for dynamic loading of content with the .mq(str). You can test using media queries, and then output the relevant style. You'll want to make sure to think about the issues present in the notes section on that page.
- How does one tell on a mobile browser if the resources loaded anyway (well other than the obvious...looking at the webserver logs) or I guess you could route it through a proxy and check that way...but is there anything similar to firebug for mobile stuff, so you can see everything being loaded?
- I don't know of any other way. I only have an iPod Touch, but it does have a javascript debugging console. In theory, at the end of load, you can see what resources are in the DOM... Outside that I don't know though.
- A google promted this: http://stackoverflow.com/questions/5943985/is-there-something-like-firebug-for-mobile-browsers
points
320andup might have the answers you're looking for;
http://www.stuffandnonsense.co.uk/projects/320andup/
- Thanks! I've really been wondering about that for quite a while.
