Issue
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(bothmsandwebkit)max-widthinstead ofmax-device-widthin the media queriesfont size: 100% !importantin 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>
Solution
The solution was to wrap all text in <p> tags then apply font-size to the <p> tag.
Answered By - Zack
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.