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 Abinadi Ayerdis over 7 years ago
  • Thanks man! :) Andrew J. Leer over 7 years ago
  • 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. Andrew J. Leer over 7 years ago

2 answers

Ktash 1851
This was chosen as the best answer

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.

Answered over 7 years ago by Ktash
  • 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? Andrew J. Leer over 7 years ago
  • 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. Ktash over 7 years ago
  • A google promted this: http://stackoverflow.com/questions/5943985/is-there-something-like-firebug-for-mobile-browsers Ktash over 7 years ago

320andup might have the answers you're looking for;


Answered over 7 years ago by Tony Crockford
  • Thanks! I've really been wondering about that for quite a while. Andrew J. Leer over 7 years ago