CODEWITHSUNDEEP
htmliosios6html-email
ragebiswas
ragebiswas

Reputation: 3878

Mobile viewport on ios 6 email not working as expected

I'm trying to understand how to instruct the iOS email client (iphone 4s, iOS 6) to respect the viewport meta tag. I read through the official docs at https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport, and I've tried including something like the following:

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

I've tried variations (from http://www.mobilexweb.com/blog/iphone-5-ios-6-html5-developers) such as:

<meta name="viewport" content="initial-scale=1.0">

But nothing seems to cause any effect. My specific use case is that I'm composing HTML emails for iOS. Some of these emails have really large tables (which I have no control over) - and the iOS email client "zooms out" to include the entire table, thus making the font unreadably tiny.

Any help would be greatly appreciated :-)

Upvotes: 1

Views: 1747

Answers (2)

estaples
estaples

Reputation: 982

Fixed width applied to nested tables will override your media queries in iOS, causing the zoom you describe. I don't think there's a way around this without giving nested content fluid or max widths.

Upvotes: 0

adnrw
adnrw

Reputation: 1040

Unfortunately Mail on the iPhone doesn't support scale tags via the viewport meta tag.

See here for more info: http://www.emailonacid.com/blog/details/C6/emailology_viewport_metatag_rendered_unusable

(maybe of note: Emails display blank on a Blackberry if the viewport tag is included!)

Upvotes: 2

Related Questions