: Is it possible to use media queries for responsive emails? Today and yesterday I had nightmares... One thing is that I personally have a Windows phone. That didn't help surely. But I was
Today and yesterday I had nightmares... One thing is that I personally have a Windows phone. That didn't help surely. But I was reading up on iPhone settings and Android settings and there was no clear answers.
Well, Litmus had this answer which was precise for iPhone 5S, but the question becomes "what about other phones?"
How do you combine media queries for both iphone then galaxy and then other smaller resolution screens?
One of the main problem is there is no good documentation stating which phones are the most popular and what are the resolutions of those phone settings - so media querying can become more streamlined.
Here is some code I put in for my settings but I don't know if that was good enough or not. For the most part everyone told me they could see the email fine.
@media only screen and (max-width: 620px) and (min-width: 511px), only screen and (max-device-width: 620px) and (min-device-width: 511px) {
/* @ -ms-viewport { width: device-width; }*/
table.container { width: 480px !important }
@media only screen and (max-width: 510px), only screen and (max-device-width: 510px) {
table.container { width: 320px !important }
As you see by the first code block, Microsoft does their own thing and that was another total nightmare.
Although Windows Phone is not too popular right now Windows 8 surely is and the RT IE uses the same viewport format.
Same Litmus cost so much to use.
More posts by @Vandalay110
1 Comments
Sorted by latest first Latest Oldest Best
This is not the correct forum for this question. Hopefully someone will migrate it here.
That being said, Responsive is quite common in html email. Here is the support chart. You'll note that there is no support by Gmail and Yahoo, for this reason, I prefer a fluid percentage based layout to avoid segmentation. Most email designers use media queries heavily though, preferring to not limit their options, targeting the best case scenario with a fallback for clients with no support. Mac clients use the Webkit engine which is very robust, so it depends on your subscriber list and what devices/clients they are using.
Here is a link to some HTML Email Resources, containing a few links specifically related to responsive design and media queries.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.