Issue stopping iPhone resizing HTML e-mails

Question

I'm having an issue trying to prevent the iPhone from resizing HTML e-mails to fit the screen. It seems that code below when put into the section has no effect.

My goal is just to stop the font re-sizing. I've tried other variations using -webkit-text-size-adjust:none; inline and in other way, all without success.

Would grealty appreciate any advice or an alternative solution.

@media screen and (max-device-width: 480px){

/*fixes too big font in mobile Safari*/
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:none; }  }       </style>

Answer 1

The iPhone seems to be a pain when it comes to resizing things, especially when you switch the orientation of the phone. Have you tried adding the meta tag with viewport settings in it?

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

It does prevent them from zooming, but I haven't found any better way to stop the iPhone from zooming on orientation change. I'm not sure if this will help in this situation, but just a suggestion to try out.

Answer 2

I been stuck w/ this problem and there's no available solution on the net that works. Not until I realized what's causing this.

CAUSE: This problem occurs if you have an image w/in the email. When the image auto-scale, the entire email/page will auto-fit in the window.

SOLUTION: Add inline style for the image for min-width (300px so it doesn't take the entire 320px iphone width), max-width (your desired max with), and width of 100%.

i.e. image src="image.jpg" style="width: 100%; min-width: 300px; max-width: 500px;"

Worked for me, ...hoping this can help you too! ;-)