I have a java application that send a daily email digest built using a thymeleaf template. The email renders correctly in most environments. The only place that seems to be having problems is the native mail client in iOS. For some reason, the content is getting resized there; shrinking down such that the text is unreadably small.
I tried adding
style=”white-space: pre-wrap”
to the tag that holds the message content, and it seemed to work at first. Today however, the issue returned and I am at a loss for what is causing it. Below is a screenshot of what the email looks like in iOS.
Any idea what I can do to force the content to match the screen width without resizing?
For reference, here is the template I am using:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Message Center Digest</title>
<style>a {color:#007aae !important;} </style>
</head>
<body>
<table id="main" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#003575">
<table id="header" width="90%" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="35%">
<a href="https://www.foo.edu"><img alt="My Logo" width="100px" border="0" src="https://www.foo.edu/sites/logo_white.png" /></a></td>
<td width="65%">
<h1 style="color: #ffffff; font-family: helvetica, arial, sans-serif; font-weight: normal; font-size: 30px; margin: 0;">Message Center Digest</h1>
<h2 style="margin: 0; font-weight: normal; font-family: Helvetica, Arial, sans-serif; color: #ffffff; font-size: 24px;">For <span th:text="${data.day}">Some day</span>, <a href="#" style="color: #ffffff !important; text-decoration: none;"><span th:text="${data.date}">01/01/1970</span></a></h2>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#EAEEF1">
<table width="90%" id="content" bgcolor="#ffffff" align="center" border="0" cellpadding="15" cellspacing="0" style="font-family: Arial, Helvetica, sans-serif;">
<tr>
<td>
<a name="pagetop"></a>
<h3 style="font-size: 18px; margin: 0 0 5px 0;">Table of Contents</h3>
<h4 style="margin: 0 0 10px 0; font-size: 13px;"><a href="https://www1.foo.edu/script/LogList.asp">Campus Crime and Fire Safety Logs</a></h4>
<div th:each="entry, stats : ${messageMap}" th:with="channelMessage=${entry.value}">
<h4 th:attr="id=${'header_' + channelMessage.channelId}" th:text="${entry.key}" style="margin: 0; font-size: 13px;">Category</h4>
<ul th:attr="id=${'titles_' + channelMessage.channelId}" id="titles" style="list-style: none; margin: 0 0 10px 0; padding-left: 15px; font-size: 13px;">
<li th:attr="id=${'t_' + message.id + '_' + channelMessage.channelId}" th:each="message : ${channelMessage.messages}"><a th:text="${message.title}" th:href="${'#message_' + message.id + '_' + channelMessage.channelId}">Title 1 </a></li>
</ul>
</div>
<table th:each="entry, stats : ${messageMap}" th:with="channelMessage=${entry.value}" class="category" width="100%" border="0" align="center" cellpadding="10" cellspacing="0">
<tr>
<td>
<h2 th:attr="id='category_'+${channelMessage.channelId}" th:text="'Category: ' + ${entry.key}" style="color: #00397C; margin: 0;">Category: Unknown</h2>
<table th:each="message : ${channelMessage.messages}" class="message" width="100%" align="center" cellpadding="0" cellspacing="0" border="0" style="border-bottom: solid #ccc 1px;">
<tr>
<td style="font-size: 13px; color: #333333; padding-left: 15px; padding-bottom: 15px; padding-top: 15px;">
<a th:attr="name=${'message_' + message.id + '_' + channelMessage.channelId}" id="message1"></a>
<span th:attr="id=${'title_' + message.id + '_' + channelMessage.channelId}" ><strong th:text="${message.title}">A title</strong></span><br/>
<span th:attr="id=${'from_' + message.id + '_' + channelMessage.channelId}"><strong th:inline="text">[['From: ' + ${message.creatorName} + ' ']]<a th:href="@{mailto:{to}(to=${message.creatorEmail},subject="Re: "+ ${message.title}) }" th:text="'<'+${message.creatorEmail} + '>'">[email protected]</a></strong></span><br/><br />
<div th:switch="${message.isHtml}">
<p style="white-space: pre-wrap" th:attr="id=${'body_' + message.id + '_' + channelMessage.channelId}" th:case="true" th:utext="${message.body}">HTML text</p>
<p style="white-space: pre-wrap" th:attr="id=${'body_' + message.id + '_' + channelMessage.channelId}" th:case="*" th:text="${message.body}">Standard text</p>
</div>
<p><a href="#pagetop">Top</a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br />
<br />
<br />
<p align="center" style="font-size: 13px;"><em>Update how you receive messages by visiting the Message Center.
For help using the Message Center, email: <a href="mailto:[email protected]">[email protected]</a> or call 555-123-4567.</em></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
