I'm working on a responsive email template for my employer. For the desktop size, I was able to leave the default font size at 16px and just use rem to adjust sizes as necessary. It looks fine on the desktop, in Gmail, and is fully responsive. However, when viewed in Mail on iPhone, the font is SO SMALL. I had to add a media query that increases the base font size to 26px to get reasonable font sizes in the email. I've tried doing some research, but it doesn't seem as if other people have had to do the same. There is very little CSS in the code, but here is what I have:
body, table, td, a, p, span {-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
@media screen and (max-width: 600px) {
html, td {
font-size: 26px !important;
line-height: 1.3;
}
}
I also have
<meta name="viewport" content="width=device-width, initial-scale=1">
There is some other CSS having to do with resizing images, with margins, etc. but that is the only CSS dealing with font-sizes (all the rem info is inline so it isn't stripped out by Bronto/Gmail). If I resize it in the browser to a mobile size, the text looks massive, but when viewed on my iPhone, it looks great. I'm concerned that this may be an iPhone quirk though and that it will look massive on other types of devices. Does anyone have any insight?
Okay, finally figured it out. Luckily I had been going through and making all our email templates responsive, and one of them didn't have a hero image. Guess what? The font size looked massive on mobile for the imageless-template! So after some experimentation, I found that
img {
width: 100% !important;
}
completely resolved the issue, so that now the actual font-size matches what is set in the CSS. Despite all the width:100% styles set on the image itself and on its parent containers, somehow the image must have been too large and triggered a resize of all content, I guess? If anyone has an explanation I'd love to hear it.