编码电子邮件客户端的HTML：Apple Mail中的字体大小始终大于Microsoft Outlook

Question

我一直在线关注各种指南，例如Campaign Monitor上的指南，以构建一个HTML页面，供在电子邮件客户端中查看。对于那些不熟悉的人来说，这实质上意味着用HTML表和内联CSS构建页面来创建普通网页的外观和格式。这种不同的编码行为是由于大多数电子邮件客户端限制了大量CSS样式规则的事实。为了测试，我一直在使用Email on Acid来预览我的页面如何在各种电子邮件客户端上呈现。

我遇到的问题是Microsoft Outlook中的文本显示小于真实的字体大小（在Chrome，Firefox或Safari中查看），并且Apple Mail中的文本显示大于真实的字体大小。由于我希望我的页面在两个平台上都能呈现，我需要找到解决这个问题的方法。

Here是显示每个平台如何比较的图像。请注意Apple Mail上的文本如此大，以至于它打破了表格的高度。毫不奇怪，简单地减少Apple Mail的文本大小不是一种选择，因为它会将Outlook中的文本缩小为遗忘。

如果您熟悉编码电子邮件，您可以知道这是一项混乱的业务，并要求您打破编码中的大量常识做法 - 包括可读性。为了帮助您阅读源代码，here是一张图像，清晰地标记每个表的开始和结束位置（在Chrome中查看）。以下源代码中名为“row_xx.jpg”的所有图像都只是构成电子邮件边框的垂直灰色位。其中一些图像内部也有一些空白区域，以给出缩进的幻觉。

来源：

<table cellspacing=0 cellpadding=0 border=0>
    <tr width="600">
        <td width="600" height="8">
            <img style="display:block;border:none;" src='images/row_11.jpg' />
        </td>
    </tr>
</table>
<table cellspacing=0 cellpadding=0 border=0>
    <tr width="600">
        <td width="44" height="10">
            <img style="display:block;border:none;" src='images/row_12a.jpg' />
        </td>
        <td width="554" height="10" style="font-family:Lucida Grande;font-size: 7px;">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </td>
        <td width="2" height="10">
            <img style="display:block;border:none;" src='images/row_12c.jpg' />
        </td>
    </tr>
</table>
<table cellspacing=0 cellpadding=0 border=0>
    <tr width="600">
        <td width="44" height="12">
            <img style="display:block;border:none;" src='images/row_13a.jpg' />
        </td>
        <td width="554" height="12" style="font-family:Lucida Grande;font-size: 7px;">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </td>
        <td width="2" height="12">
            <img style="display:block;border:none;" src='images/row_13c.jpg' />
        </td>
    </tr>
</table>
<table cellspacing=0 cellpadding=0 border=0>
    <tr width="600">
        <td width="44" height="12">
            <img style="display:block;border:none;" src='images/row_14a.jpg' />
        </td>
        <td width="554" height="12" style="font-family:Lucida Grande;font-size: 7px;">
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </td>
        <td width="2" height="12">
            <img style="display:block;border:none;" src='images/row_14c.jpg' />
        </td>
    </tr>
</table>
<table cellspacing=0 cellpadding=0 border=0>
    <tr width="600">
        <td width="600" height="8">
            <img style="display:block;border:none;" src='images/row_15.jpg' />
        </td>
    </tr>
</table>
<table cellspacing=0 cellpadding=0 border=0>
    <tr width="600">
        <td width="44" height="10">
            <img style="display:block;border:none;" src='images/row_16a.jpg' />
        </td>
        <td width="554" height="10" style="font-family:Lucida Grande;font-size: 7px;">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </td>
        <td width="2" height="10">
            <img style="display:block;border:none;" src='images/row_16c.jpg' />
        </td>
    </tr>
</table>
<table cellspacing=0 cellpadding=0 border=0>
    <tr width="600">
        <td width="44" height="14">
            <img style="display:block;border:none;" src='images/row_17a.jpg' />
        </td>
        <td width="554" height="14" style="font-family:Lucida Grande;font-size: 7px;">
            uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
        </td>
        <td width="2" height="14">
            <img style="display:block;border:none;" src='images/row_17c.jpg' />
        </td>
    </tr>
</table>
<table cellspacing=0 cellpadding=0 border=0>
    <tr width="600">
        <td width="600" height="11">
            <img style="display:block;border:none;" src='images/row_18.jpg' />
        </td>
    </tr>
</table>
<table cellspacing=0 cellpadding=0 border=0>
    <tr width="600">
        <td width="44" height="13">
            <img style="display:block;border:none;" src='images/row_19a.jpg' />
        </td>
        <td width="554" height="13" style="font-family:Lucida Grande;font-size: 7px;">
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </td>
        <td width="2" height="13">
            <img style="display:block;border:none;" src='images/row_19c.jpg' />
        </td>
    </tr>
</table>
<table cellspacing=0 cellpadding=0 border=0>
    <tr width="600">
        <td width="44" height="12">
            <img style="display:block;border:none;" src='images/row_20a.jpg' />
        </td>
        <td width="554" height="12" style="font-family:Lucida Grande;font-size: 7px;">
            =Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. 
        </td>
        <td width="2" height="12">
            <img style="display:block;border:none;" src='images/row_20c.jpg' />
        </td>
    </tr>
</table>
<table cellspacing=0 cellpadding=0 border=0>
    <tr width="600">
        <td width="600" height="12">
            <img style="display:block;border:none;" src='images/row_21.jpg' />
        </td>
    </tr>
</table>
<table cellspacing=0 cellpadding=0 border=0>
    <tr width="600">
        <td width="44" height="12">
            <img style="display:block;border:none;" src='images/row_22a.jpg' />
        </td>
        <td width="554" height="12" style="font-family:Lucida Grande;font-size: 7px;">
            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti 
        </td>
        <td width="2" height="12">
            <img style="display:block;border:none;" src='images/row_22c.jpg' />
        </td>
    </tr>
</table>
<table cellspacing=0 cellpadding=0 border=0>
    <tr width="600">
        <td width="44" height="12">
            <img style="display:block;border:none;" src='images/row_23a.jpg' />
        </td>
        <td width="554" height="12" style="font-family:Lucida Grande;font-size: 7px;">
            quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, 
        </td>
        <td width="2" height="12">
            <img style="display:block;border:none;" src='images/row_23c.jpg' />
        </td>
    </tr>
</table>
<table cellspacing=0 cellpadding=0 border=0>
    <tr width="600">
        <td width="44" height="11">
            <img style="display:block;border:none;" src='images/row_24a.jpg' />
        </td>
        <td width="554" height="11" style="font-family:Lucida Grande;font-size: 7px;">
            similique sunt in culpa qui officia deserunt mollitia animi, 
        </td>
        <td width="2" height="11">
            <img style="display:block;border:none;" src='images/row_24c.jpg' />
        </td>
    </tr>
</table>
<table cellspacing=0 cellpadding=0 border=0>
    <tr width="600">
        <td width="44" height="12">
            <img style="display:block;border:none;" src='images/row_25a.jpg' />
        </td>
        <td width="554" height="12" style="font-family:Lucida Grande;font-size: 7px;">
            id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
        </td>
        <td width="2" height="12">
            <img style="display:block;border:none;" src='images/row_25c.jpg' />
        </td>
    </tr>
</table>
<table cellspacing=0 cellpadding=0 border=0>
    <tr width="600">
        <td width="44" height="12">
            <img style="display:block;border:none;" src='images/row_26a.jpg' />
        </td>
        <td width="554" height="12" style="font-family:Lucida Grande;font-size: 7px;">
             Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus,
        </td>
        <td width="2" height="12">
            <img style="display:block;border:none;" src='images/row_26c.jpg' />
        </td>
    </tr>
</table>
<table cellspacing=0 cellpadding=0 border=0>
    <tr width="600">
        <td width="600" height="24">
            <img style="display:block;border:none;" src='images/row_27.jpg' />
        </td>
    </tr>
</table>

Answer 1

在iOS设备中显示较大的文字似乎是一个常见问题，但我还没有听说过它在Apple Mail中发生过。也许iOS设备的修复也适合你。只需将其包含在您不希望调整大小的文本样式中。如果您不希望调整任何文本的大小，请将其包含在body标签的样式中。

-webkit-text-size-adjust:none;

Answer 2

你有这个<style>标签吗？

body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */

显然，在这种情况下只有文字大小的东西是相关的。

如果它没有解决问题，那么除了你想要开始尝试使用技巧组合来定位不同的客户端以根据他们不同的支持来定位客户端时，你可以做的其他事情并不多。