在 iOS 中调整 HTML 电子邮件内容大小

问题描述 投票：0回答：1

我有一个 java 应用程序，它发送使用 thymeleaf 模板构建的每日电子邮件摘要。电子邮件在大多数环境中都能正确呈现。唯一似乎有问题的地方是 iOS 中的本机邮件客户端。由于某种原因，内容的大小正在调整；缩小到文本小得难以阅读。

我尝试添加

style="white-space: 预换行"

到保存消息内容的标签，一开始似乎有效。然而今天，这个问题又出现了，我不知道是什么原因造成的。下面是电子邮件在 iOS 中的屏幕截图。

知道我可以做什么来强制内容匹配屏幕宽度而不调整大小吗？

供参考，这是我正在使用的模板：

<!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>
html css ios thymeleaf html-email
1个回答
0
投票

我很久以前也做过类似的事情

问题是 HTML 历史记录，我不确定为什么，但你必须定义所有内容，并且由于某种原因，页面正文不会占据屏幕的完整尺寸

<style>    body {     margin: auto;     width: 100%;   }  </style>

CSS 可以改变 HTML 在页面上的查看方式，所以我只是添加了带有一些 CSS 的样式标签，

看这个例子，

https://github.com/dolev146/nodejsserver/blob/master/routes/emailTemplate.js

您可以像普通网页一样编辑HTML，这样下次如果出现错误，只需在PC上将HTML编写为textfile.html，然后在浏览器上打开它，然后您就可以控制它 就像这个视频中一样 https://www.youtube.com/watch?v=KvDzt7_ELt8&ab_channel=iEatWebsites

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.