forcing iphone/android to zoom to email content width

I've recently been testing various media query template examples (from campaign monitor articles and a few other sources).

I was wondering if there's away to force an iphone(and perhaps other mobile devices) to zoom to the width of an email.

While many mobile optimized templates are succesful in resizing the email content (so it's readable without the need for left/right scrolling). The content still shows up at a smaller size to the viewport and needs pinching/zooming to be readable.

I presumed that the fluid layout approach would achieve this but again examples that i've looked at (using % width and max device width) still don't seem to scale to the screen.

I presume this is to do with the discrepancy between screen resolution and viewport size...

Having gone to the trouble to optimize it's an annoying step (to need to zoom). I wonder if there is a way /hack around it...


roshodgekiss roshodgekiss, 5 years ago

Hey there fivedoor, it's hard to say exactly why your layout appears to be zoomed out without viewing the code. However, I can really recommend:

- having the layout resize to 320px width (or less) on mobile devices. If the layout still looks zoomed out, then there's likely something in your design that's pushing out the width.
- making sure text doesn't have -webkit-text-size-adjust: none applied
- worst comes to worst, try using the viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Generally I don't recommend using the latter approach, because it prevents zooming under all circumstances. This can be a bit of a usability boo and in theory, you shouldn't have to use it if your design is adapting to the display width as desired.

Thanks, fivedoor! Feel free to post your code here if you would like us to give it a test - best of luck!

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

Hey Ros,
Great to get your feedback.

Here's some screenshot examples of the templates I was testing as they look in my iphone inbox without any zooming: … G_0123.png … G_0124.png … G_0125.png

(The first from stylecampaign blog, the second from CM, and the third I think you will also recognise from an article you wrote for Smashing Mag!)

Here's them zoomed to how I thought they ought to be appearing: … G_0126.png … G_0127.png … G_0128.png

The html is still available from all those articles: … -with-css/ … -practice/ … max-width/

(The style campaign template appears to fill the screen for a split second when opened then reverts to as you see in the screenshot. )  I think there was an updated version of the html so I hope I linked to the latest one.
The style code of the one I tested is as follows:

<STYLE type="text/css">
.ReadMsgBody { width: 100%;}
.ExternalClass {width: 100%;}
a {color: #b5a379;
  text-decoration: none}
a:link {color: #b5a379;
  text-decoration: none}
a:visited {color: #b5a379;
  text-decoration: none}
a:active {color: #b5a379;
  text-decoration: none}
#maintable {width:550px;}
@media screen and (max-width: 660px){
#maintable {width:100%; max-width:550px;}
#mainimage { -ms-interpolation-mode: bicubic; width:100%; max-width:550px; max-height:237px; }

Meantime I'm going to try to digest the mozilla article you linked to and another article linked from it: … s_not.html

Look forward to any more feedback you have


Alex I., 5 years ago

Hello Fivedoor,

Good to see more people taking the initiative with mobile emails!

Unfortunately the way I work around this is fairly time consuming and/or a ball ache!

The way I code emails (and I presume most people do too!) is a 100% width table. Inside there are tables at the width you want your email to be with your content in.

I force all those tables to be 320px wide.

@media screen and (max-width: 660px){
#maintable {width:320px !important;}

The rest I would do is trial and error with font-sizes and what not.

fivedoor, 5 years ago

This is just a little postscript to my original post.

Having admitted defeat I had a fresh look recently and realised the issue was due to a bit of footer text and image that the ESP I was sending from added to the bottom of the email.

I thought I'd dealt with it by adding a 100% width fix for mobile but there was a fixed width element in there I'd missed which was stretching the content.   Very simple and very stoooopid of me to miss it :(

Thanks again for the feedback.

The issue, briefly mentioned earlier, where content will fill the screen or flicker for a split second then revert to the desired size/formatting when opening on mobile - is something I still haven't resolved. I've noticed it in a few other fluid templates (though not campaign monitor's I should add!).

Further frustrated posts/Qs on that one will no doubt follow...

roshodgekiss roshodgekiss, 5 years ago

Hey there fivedoor, thank you so much for following this one up. For a moment I was thinking, "Oh dear, something may have changed...", but this resolves my crisis of faith :)

The flickering is very curious and we'll keep our ear to the ground for further reports. Thanks, fivedoor - with luck we'll have answers to your future questions :)

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

Thanks again Ros and sorry for the false alarm on this one.

The flickering issue may well be something as equally minor /silly but I might just need to share it with the class if I can't get my head around it

Cheers :)

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