CODEWITHSUNDEEP
iphoneemailresponsive-design
Mervin
Mervin

Reputation: 725

Responsive Email - IOS scales the email to fit to view port size

I am working on designing a responsive email for mainly iphone users and I found that though though IOS mail does support media queries, for some reason IOS mail scales the entire mail down to view port size and is not truly responsive in nature.

I did set the meta tag as given below 

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" />

but even then the responsive queries dont get activated.

I am sending the email from outlook and I tested it on Google android gmail app and there the email is responsive, so its not a case of outlook stripping out the media queries

Upvotes: 2

Views: 2915

Answers (3)

estaples
estaples

Reputation: 982

I had this issue, then discovered that there was content within my email that was forcing the page wide in iOS, giving the appearance that media queries weren't working. Namely, you want to ensure that there are no fixed widths specified that exceed what's in your media queries, especially on/in nested tables.

Upvotes: 1

OneEightLeft
OneEightLeft

Reputation: 324

First off - There is no need to for a meta tag in email. (you would only include it if you are using the same html file for a web version.)

Second - The reason you are running into this issue is because you are sending with Outlook. I'm not sure which year you are using but outlook will probably strip everything in the head out of the email before it's sent.

Go to mailchimp.com and sign up for a free account, send from there and see if you are still having the issue

Upvotes: 2

Darryl Vos
Darryl Vos

Reputation: 339

I've been creating responsive HTML emails for a number of years now... I'm not sure why you're having problems.

Outlook is not a great way to send HTML emails. If this is a campaign email or e-newsletter for something you should really send it through a real ESP (Email Service Provider. ie. MailChimp, Campaign Monitor, etc.).

If you could provide code samples I might be able to provide some insight into what exactly is going wrong.

Upvotes: 0

Related Questions