HTML Email Fonts Not Scaling in Mail App on iPhone

Question 1

You can't actually rely on styles getting inherited, which means you will have to apply every single style to every single element all the time... This means the font-size on the div won't actually have any effect on the text within it.

For a quick fix I suggest wrapping the text in a paragraph and applying the needed styles to it.

<div style="padding-top:15px; font-size:12px; color:#363636;">
  <p style="font-family: 'Helvetica Neue Light', 'HelveticaNeue-Light', 'Helvetica Neue', Arial; font-weight: normal; font-size: 26px; line-height: 36px;">Thanks for downloading our app. Prepare to experience a new world of imagination. Check us out on <a style="text-decoration: none;" href="https://www.facebook.com/myApp" target="_blank">Facebook</a>, <a style="text-decoration: none;" href="https://twitter.com/myApp" target="_blank">Twitter</a>, and <a style="text-decoration: none;" href="https://plus.google.com/+myApp/posts" target="_blank">Google +</a> for the latest details. Oh, and tell your friends!</p>
</div>

Generally I would advise writing the styles in a style tag and then using a service like http://inliner.cm when you're finished and ready to inline the styles for gmail support. That way you won't have to copy&paste the font-family and default styles everywhere yourself

Using the suggested method of styling your html email in a <style> tag in the head and then using an inliner, you can actually go back to using the ink framework too and still have it work in gmail.

Question 2

Add this to your <style> tag:

body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}

The width/padding/margin/ms-text is is obviously unrelated, but should also be there.

Also, iPhone uses webkit to render, so you should be able to override the styling manually by adding a class in the <style> tag. Gmail will ignore this of course.

Question 3

Try this:

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

If I remember correctly, iPhones auto scale email content unless otherwise told not to by adding initial-scale=1.0

Hope that helps. I know very well how frustrating email development can be.

Question 4

Hey mate I didnt see your code but recently I fixed my newsletter by adding

-webkit-text-size-adjust:none;

in your td style

I had the same problem.

Try it might be the issue.

Question 5

I had the same problem this week and tried out a lot of code. The only solution that worked was adding this line to your <style>:

<style>
    body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
</style>