The font size in the following HTML email template is scaling properly for Android (tested on Samsung S22 Gmail) but not iOS devices. The font is tiny when viewed on iOS. I've tested on iPhone X and iPhone 13 in both Gmail and Apple Mail apps.
I've tried the following as suggested by other posts. Any other suggestions?
text-size-adjust: none (both ms and webkit)max-width instead of max-device-width in the media queriesfont size: 100% !important in the media queries for .body_text<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="format-detection" content="telephone=no">
<meta name="x-apple-disable-message-reformatting">
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700|Roboto+Slab:100,300,400,700|Roboto:300,300i,400,400i,500,500i,700,700i" media="all" rel="stylesheet" type="text/css">
<title>Questrade, Inc.</title>
<style media="all" type="text/css">
*{
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body{
-webkit-font-smoothing: antialiased;
}
</style>
<style type="text/css">
/*Media Queries*/
@media screen and (max-device-width: 640px){
.responsive_full_width { width: 100% !important; }
.h1 { font-size: 18px !important; line-height: 27px !important; }
.body_text{ font-size: 16px !important; line-height: 24px !important; }
.footer_text { font-size: 11px !important; line-height: 17px !important; }
.social_icons { width: 40px !important; }
}
@media screen and (max-device-width: 480px){
.responsive_full_width { width: 100% !important; }
.h1 { font-size: 18px !important; line-height: 27px !important; }
.body_text{ font-size: 16px !important; line-height: 24px !important; }
.footer_text { font-size: 11px !important; line-height: 17px !important; }
.social_icons { width: 40px !important; }
}
</style>
</head>
<body style="-webkit-text-size-adjust: none; -webkit-font-smoothing: antialiased; margin: 0; padding: 0; width: 100%; height: 100%; background-color: #FFFFFF">
<!--wrapper table-->
<table align="center" border="0" cellpadding="0" cellspacing="0" style="margin: auto; padding: 0;" width="100%">
<tbody>
<tr>
<td>
<!--container table-->
<table align="center" cellpadding="0" cellspacing="0" style="font-family: 'Open Sans', Verdana, Arial; max-width: 640px; padding: 5px">
<tbody>
<!--header logo-->
<tr>
<td>
<img width="100%" height="auto" src="https://media.questrade.com/images/Questrade-Logo-Banner.jpg">
</td>
</tr>
<tr>
<td>
<table width="100%">
<tr><td class="body_text" style="font-size: 16px; line-height: 24px; font-family: 'Open Sans', Verdana, Arial">Body Text</td></tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
The solution was to wrap all text in <p> tags then apply font-size to the <p> tag.