Android doesn't like media queries

Anyone else having issues with Android not working with media queries? On the Litmus Android 4.0 test, emails resize to the screen as intended, but on a real phone running Android 4.0 they don't work.

JohnP JohnP, 5 years ago

Sorry, probably should have put this in the Email Design & Coding forum...

Diana Diana, 5 years ago

Hi JohnP,

Unfortunately, Android has 2 default mail clients Email and Gmail, and they offer differing support. The Email client does support media queries, but the Gmail client doesn't. So what you're seeing is just the difference between those 2 different apps. Hopefully support improves with later OS versions!

D. Potter
Campaign Monitor
JohnP JohnP, 5 years ago

Thanks for the response Diana,

Being aware of Gmail's lack of <style> support, both the screenshots are in the default Android mail. The default email client on my Samsung Galaxy S2 does not support media queries either.

roshodgekiss roshodgekiss, 5 years ago

Hi JohnP, that's unusual about the default client not supporting media queries on the Samsung Galaxy S2 - anecdotal reports suggest otherwise. Out of curiosity, could you kindly let us know what declaration you're using? It may be a matter of tweaking it for the S2's display dimensions, eg.

@media screen and (max-width: 800px) { /* your CSS here * / }

Thanks, JohnP! Let us know how you go.

Get in touch with us on Twitter:
We're also on Facebook:
JohnP JohnP, 5 years ago

Hi Ros, I figured out what was the cause.

My company MS Exchange Server must have some sort of security filter or something stripping out the media query. (Or maybe it is just an MS email forwarding thing...) Even when setting the media query to an overkill amount like 1600, it still wasn't working on either my Galaxy S2 or a co-workers Nexus.

I set up another non-corporate account on my default Android mail and the media query works. Makes me wonder though, how common the issue is with corporate MS Exchange Servers stripping out parts of the code before forwarding onto devices.

roshodgekiss roshodgekiss, 5 years ago

JohnP, thank you for letting us know about this. We have received reports of mail servers stripping out code, but we hear about it so infrequently, that it's not something we usually ask people to look out for. I'm sure this happens to many more folks though (and duly, goes unreported) - it's just that they wouldn't have the know-how to test, or do something about it like you can! Keep us posted if you come across any other quirks like this :)

Get in touch with us on Twitter:
We're also on Facebook:
JohnP JohnP, 5 years ago

I'm wondering if putting a unique bg image into each media query css declaration would allow for tracking the effectiveness of the media queries.

Maybe that is something CM might consider tracking in future, as it will also return device information...

roshodgekiss roshodgekiss, 5 years ago

Hi JohnP - that's an interesting suggestion! I'll pass this on and see if it's something we can at least use in an internal project for finding out how commonly media queries are supported. Thank you so much for thinking this through :D

Get in touch with us on Twitter:
We're also on Facebook:
rundmb, 4 years ago

Anyone know any more on this? I made a responsive design that was admittedly a bit complicated, but it came through absolutely fine on an iPhone despite passing through MS exchange. My Android 4 device (Sony Experia S) dumped all the media queries as outlined above.

In Outlook 2007 the media queries were also ignored, meaning they can't be used to hide any content really.

Just wondered if anyone has any more info about media query support.


JohnP JohnP, 4 years ago

I think it was my corporate security settings that was stripping the css. Not sure what security software my company has.

Were all the emails received at the same domain? If you set up another email on a separate domain to receive emails in Outlook or your Android will they come through okay?

roshodgekiss roshodgekiss, 4 years ago

Hi rundmb, we have a media query support chart which may come in handy. If you're using an email client other than the default one, you're not likely to have much luck on your Android device :P

Outlook 2007 is no surprise as it ignores everything in the <head> tags, but then again, you can likely do without optimizing for it specifically. You may want to look into conditional comments if you specifically want to tailor content for this client. Hope this helps! :D

JohnP - Cheers mate, you're a champion :D

Get in touch with us on Twitter:
We're also on Facebook:
kirstylm, 4 years ago

Hey guys

I'm having the same probelm as above. I am using the default mail client on my samsung galaxy s3 and the media queries will not work (even if I use more than max-device-width-480px)
My default mail client would not render my emails from my companies outlook 2007 passed through the exchange server, neither will it render my yahoo emails correctly (also set up to come through my default mail client (not app)

I checked the email on my friends LG phone, which is also using her default mail client, pulling the email from our companies outlook 2007 email, and hers renders perfect with the media queries.

Is there any chance anyone has found a solution? '

Thank you :)

kirstylm, 4 years ago

Oh, it also renders perfect in litmus and I have android 4.04 on my phone. I' assuming it just seems to just be a probelm with android default mail client stripping out the media queriens since LG mail client renders the outlook 2007 email fine? I'm not an IT person, so not sure if there are any other settings somewhere that could create the issue.

I was wondering if any one has had any luck on their samsung s3 personall with viewing media queries through their default mail client?

roshodgekiss roshodgekiss, 4 years ago

Hi kirstylm, if we can rule out your company's Exchange server stripping out the media queries, try changing the media query declaration to:

@media only screen and (max-device-width: 720px) and (orientation:portrait) { ... }

This should work with the screen's (large) dimensions.

There's an enlightening discussion on Stack Overflow which we hope you find very helpful. Thanks, kirsty! Let us know how you go :)

Get in touch with us on Twitter:
We're also on Facebook:
jthomas, 4 years ago

What about for other platform, does it have same issue.

- works as designer for -

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free