Media queries for mobile browsers

January 15, 2012 —

On Friday, I posted about some test cases and detailed how Mobile Safari handles redeclared assets in three situations on iOS. I did this to try to clear up the concern that using media queries led to compounding or unnecessary file downloads. There are specific cases, in older versions of the Mobile Safari, that raise valid concerns, but in most practical cases Mobile Safari’s behavior complements responsive web design (?) well. Mobile browsers have come a long way over the last few years.

Here are a few things to keep in mind:

Hiding Image Tags

You can hide an HTML tag, but you can’t prevent the asset from being requested. If you thought you’d just set that entire column of banner ads to display:none within your media query (or, simply, further down the cascade) to make a better experience for your mobile visitors, just know that, as of Mobile Safari 5.1, your audience still has to download each of the assets (e.g., images sourced in tags) that you’ve just hidden, and your advertisers might be paying for impressions you aren’t delivering.

Hiding Background Images

You can hide a CSS background image and prevent the asset from being downloaded by setting the element’s parent to display:none. Just remember, this doesn’t work if you hide the element itself. Setting the parent to display:none is an easy way to hide images without forcing pointless downloads. Mobile Safari exhibits this behavior as far back as I’ve been able to test (Mobile Safari 3).

Replacing Background Images

Another way to hide a background image is to set the background-image to ‘none’ on the element itself. Maybe you’d like to remove a background-image from your document’s , for instance. The initial asset will not be downloaded by iOS 5 Mobile Safari. This same behavior works if you’d like to declare an alternate background-image within your media query (e.g., replacing huge.png with small.png in my test cases).

You should be aware, however, that prior versions of the browser actually will download the initial asset as well as the one you declare further down the cascade. The only documentation I can find regarding this bug suggests all versions of Mobile Safari prior to 5 are affected, but I’ve seen conflicting results.

Declaring for Orientation

You can target an orientation (e.g., landscape), and the browser will only request that asset only if you start in or change to that orientation. This might be a rare situation, but it’s nice to know that, as of Mobile Safari 5, the browser will not request orientation-specific file(s) at initial page load if they aren’t needed. Being able to target iPhone orientation is new to iOS 5, so I haven’t tried testing anything other than Mobile Safari 5.

Caveat Emptor

I’m being careful to specify Mobile Safari on iOS. I’ve tested WebKit on Android with similar results, but everything you see above has been confirmed by a small army of independent tests over time. On that note, I should formally thank Jason Grigsby, Tim Kadlec and Michael Lehmkuhl for confirming each of these test cases over the weekend and Ethan Marcotte for helping me focus the test cases in the first place.

Clearly, there are more devices and browsers to test against, but I’ll never get through them all. I plan to follow up with results from Android’s WebKit and Opera Mobile once I’ve had chance to further verify. If you’d like to check on your own, I’ve posted the files I used to test four of the scenarios. You’ll just need access to your log files (access_log in my case) to confirm which files are being requested by the browser. It probably goes without saying that you’ll need to clear data / cache between each test, but I’ve noticed that even that is sometimes not enough on older devices. If you do find further results, I’d love it if you’d ping me on twitter.

Just don’t let all these caveats bury how far mobile browsers have come and how ably they handle assets today. I hear mobile is going to be a big thing.

7 Responses to “Media queries for mobile browsers”

  1. Jason Grigsby

    Thanks Aaron. A couple of follow up notes:

    * If you cannot hide a parent, using display:none on the element itself still downloads the asset even in iOS5. However, using background-image:none to override will not download the assets as of iOS 4.2. I’m sure background:none would work as well, but background-image:none is more precise and won’t change any background colors you may have set.

    * FWIW, I’m pretty sure, but have not yet verified, that iOS 4.2 is also when overriding one image with another stopped resulting in duplicate downloads. Both fit the exact description of the webkit bug (https://bugs.webkit.org/show_bug.cgi?id=24223) that was fixed in August 2010 and the timing is right as iOS 4.2 came out in November 2010. In short, both replacing images and orientation changes should work as of 4.2, but this needs to be verified.

    Thanks for documenting this.

  2. Aaron Mentele

    Hey Jason. On your first point, I was hoping to clear that (the parent condition) up in this post, since I caused that confusion by giving you a modified (read: screwed up) test case. I’ve confirmed hiding the parent works back to 3.1.3, btw.

    On your second, I was afraid to note iOS 4.2 since I don’t have access to that specific browser this weekend – thus, the “conflicting results” note. I’m sure I’ve confirmed this in the past, but I had others tell me I was wrong this weekend. I’ll update the post as soon as I can confirm. August of 2010 was a long time ago, so I think we’ll find the correct behavior goes back further than iOS 5 for sure.

    Thanks again.

  3. Jason Grigsby

    @aaron wrote:

    “On your first point, I was hoping to clear that (the parent condition) up in this post”

    I think I caused confusion by bringing up the parent condition. My comments weren’t directed at you. I should have made that clearer. I wanted to document two additional items for any web dev who might come across this post. I’m not going to have time to blog about them any time soon so commenting on your post seemed like the best place to leave these bits of knowledge where others can find them in the future.

    The point I was trying to make is that if for some reason a developer found themselves in a situation where display:none on the parent wasn’t an option, background-image:none is an option as of iOS 4.2.

  4. Aaron Mentele

    “The point I was trying to make is that if for some reason a developer found themselves in a situation where display:none on the parent wasn’t an option, background-image:none is an option as of iOS 4.2.”

    A common example of that need will be background images on the body tag, but yeah, anywhere else as well.

    Thanks.

  5. Media Query & Asset Downloading Tests | TimKadlec.com

    [...] even when they aren’t being used. A few people—including Jason Grigsby, Greg Rewis and Aaron Mentele—have done some excellent testing about how images are downloaded when media queries are involved. [...]

  6. ???

    [...] 5?s Browser Is Still (Slightly) Better …Secrets Each and every Web Developer Need To Know …Media queries for mobile browsers | Aaron MenteleWeb Fonts and Web Browsers ? why Firefox is the best choice for …?? | ?? | ?? | [...]

  7. return man 2

    I know my viewers would enjoy your work. If you’re even remotely interested, feel free to shoot me an email.
    return man 2 http://returnman2.blogspot.com/