When Using @Media Queries, Does a Phone Load Non-Relevent Queries and Images

When using @media queries, does a phone load non-relevent queries and images?

Behaviour is browser depended but iOS Safari and Android Chrome will respect the media queries and only download the background images for the applicable media queries.

If you want to inspect this behaviour, try loading the page with Mobitest (http://mobitest.akamai.com/) or a tethered device.

If you use separate CSS files (and I'd urge you not too) the browser will download each of them even if it doesn't need them, this is a limitation of the CSSOM. Some browsers e.g. WebKit and Blink based ones prioritise the stylesheets so the ones needed to render the page are downloaded first and the others at some point later.

One thing to watch out for is display:none on content images as it won't prevent download in many situations. Tim Kadlec explores this more here: http://timkadlec.com/2012/04/media-query-asset-downloading-results/

How to use media queries to display device-specific content

Writing CSS for different devices can be a pain in the ass. With Media Queries it’s easier if you know how to pin point a specific device. This can help you pin point a specific mobile device from within your CSS. Copy the code and paste it into you CSS file and get crackin’!

/* Smartphones (portrait and landscape) ----------- */

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
    /* Styles */
}

/* Smartphones (landscape) ----------- */

@media only screen
and (min-width : 321px) {
    /* Styles */
}

/* Smartphones (portrait) ----------- */

@media only screen
and (max-width : 320px) {
    /* Styles */
}

/* iPads (portrait and landscape) ----------- */

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
    /* Styles */
}

/* iPads (landscape) ----------- */

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
    /* Styles */
}

/* iPads (portrait) ----------- */

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
    /* Styles */
}

/* The New iPad (iPad 3) ----------- */

@media only screen
and (min-device-width: 1536px)
and (max-device-width: 2048px)
and (-webkit-min-device-pixel-ratio: 2) {
    /* Styles */
}

/* iPhone 4 ----------- */

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
    /* Styles */
}

How does Media Queries Reacts

No, the big picture will not be displayed on mobile devices, as long as you insert it into a media query that excludes it. But it will be downloaded if you organize your CSS this way:

/* FIRST DECLARATION:
    BROWSER STARTS DOWNLOADING THE IMAGE */
.my-img-class{
    background:url(my-large-image.jpg);
}

/* SECOND DECLARATION:
    THE RULE ABOVE IS OVERWRITTEN, SO THIS IMAGE WILL BE DOWNLOADED TOO */
@media only screen and (max-width: 600px) {
    .my-img-class{
        background:url(my-small-image.jpg);
    }
}

---

To prevent mobile devices to keep downloading the large image, you should wrap both rules into a media query.

Here's an example.

@media only screen and (max-width: 600px) {
    .my-img-class{
        background:url(my-small-image.jpg);
    }
}

The code above will be interpreted only by devices with screens smaller then 600px.

@media screen and (min-width: 601px) {
    .my-img-class{
        background:url(my-large-image.jpg);
    }
}

The code above will be interpreted only by devices with screens larger then 600px.

---

You can use different approaches to prevent the downloading of both images.

Much depends on the target of your site. If the mobile version is the most widely used, you should start planning that, then add gradually, through media queries, the content for the desktop version.

---

Here are some resources that you'll find usefuls:

• CSS3 Media Queries tutorial
• Effective Example of CSS Media Queries
• CSS Media Queries & Using Available Space

Do background images load if they are replaced with media queries?

No it wouldn't as you're completely overriding the background property*.

For reference, however, if you wish to keep your image and add in a colour, rather than using the background property, use the individual background-image and background-color properties:

div {
    background-image: url(img/large-image.jpg);
}

@media screen and (min-width: 240px) and (max-width:830px) {
    div {
        background-color: #000;
    }
}

* Note that this is browser-specific; to save time the majority of browsers will only load resources when they're required. See also: Are unused CSS images downloaded?

some smartphones pick up the desktop media queries?

Thanks for the input, i found the problem.

Some android versions have a bug where the viewport will not report correctly when the page loads, i was getting 800px viewport sizes reported for galaxy 1, 2 and 3 (!!!). The issue was fixed by adding a timeout of 200ms before actually checking the viewport width, it seems this small delay is good enough for the device to report back the right size.
It creates a small window of time (the 200ms) where the scaling of the desktop version is visible, but at least it solves the issue.

solution for anyone landing here having the same issue:

<meta id="testViewport" name="viewport" content="width=device-width, maximum-scale=1">
<script>
    setTimeout(function(){
        if (document.documentElement.clientWidth > 640) {
            var mvp = document.getElementById('testViewport');
            mvp.setAttribute('content','width=1000');
        }
    }, 200);
</script>

---

Related Topics