You know how android email zooms to the actual pixels of a 600px fixed width email where as other mobile clients will zoom out to fit it to the screen. Any idea if it's possible to override that? Was thinking viewport would do it but alas no, I can't seem to make it work.
Obviously I could get a @media query in there but I'd rather not. I'll explain why below if you're interested if not then stop reading here.
I've got a new email campaign set to go out that is designed like an infographic. I've designed it with a fixed width of 600px and used large fonts and images.
When it's loaded on an iphone or windows phone I can see the full 600px zoomed out to fit. Because of the size of the text I've used, this appears exactly how I want it, all very readable. Android phones zoom in to actual size meaning I have to scroll horizontally to view it all.
I'm normally a big fan of responsive design but with this scalable design it's not needed and will be a lot of extra code to make sure it works ok.
Here's a link to the campaign in litmus
Hi Mr-Mark, jus to confirm, have you tried experimenting with the viewport meta tag?
From my very foggy memory, the Android default client tends to zoom out sufficiently to fit text in the viewport, but not images (thus causing the scrolling). I imagine that using the viewport meta tag would be the only viable workaround for now... Although it could cause issues in iOS Mail and elsewhere.
My advice would be to experiment with responsive techniques to 'shrink' the infographic for mobile screens, then include a link to where it can be viewed in the browser instead. Thanks, Mr-Mark! I hope this has given you a few ideas :)
I did try the viewport meta tag but to no joy, I'll have more of a play around with it later, see if I can get it working. If not I'll go responsive, was after a quick fix but those are rare.
Thanks for your help
You could also try a fluid approach and media query your font sizes to scale them to fit.