我收到了一封电子邮件，我正在使用基于表格的布局进行编写，这些布局在发送到电子邮件帐户时，会在＆＃34;移动设备优化的＆＃34; Gmail for Android上的较小表单，但在Gmail for iOS上呈现全宽（因此文字较小）。
有关可能发生的事情的任何想法吗？我知道这不是最清楚的问题，我无法将其缩小到导致差异的某组HTML。谷歌搜索也没有产生明显的结果。
<table width=100% cellspacing="0" cellpadding="0" style="" class="">
<tr width="100%">
<td width="100%" style="
padding: 10px;
box-shadow: 0 2px 0 0 #f1f1f1;
background-color: #ffffff;
" class="">
<table cellspacing="0" cellpadding="0" width='100%' style='' align='' class="">
<tr style='' class=''>
<td width='' height='' style='
width: 150px;
min-width: 150px;
line-height: 0;
' align='' valign='top' class='list-card__header' colspan='1'>
<table cellspacing="0" cellpadding="0" width='100%' style='' align='' class="">
<tr style='' class=''>
<td width='' height='' style='
width: 150px;
max-width: 150px;
height: 75px;
line-height: 0;
overflow: hidden;
background-color:#dedede' align='center' valign='middle' class='list-card__image-wrapper' colspan='1'>
<img class="list-card__image" src="https://cdn.evbstatic.com/s3-build/perm_001/f8c5fa/django/images/discovery/default_logos/4.png" style="
overflow: hidden;
max-width: 150px;
height: 75px;
" border="0" />
</td>
</tr>
</table>
</td>
<td width='*' height='' style='
padding-left: 15px;
min-width: 150px;
' align='left' valign='top' class='list-card__body' colspan='1'>
<div class="list-card__date" style="
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
color: #343434;
font-size: 12px;
line-height: 20px;
height: 20px;
text-transform: uppercase;
letter-spacing: 1px;
padding-top: 5px;
min-width: 150px;
width: 150px;
">
Sat, Dec 31
</div>
<div class="list-card__title" style="
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
height: 36px;
max-height: 36px;
color: #333333;
font-size: 15px;
font-weight: 700;
line-height: 18px;
letter-spacing: 0;
min-width: 150px;
">
Hunger Plus, Inc.
</div>
<div style="
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
font-size: 12px;
line-height: 20px;
height: 20px;
color: #8c8c8c;
min-width: 150px;
width: 150px;
height: 20px;
max-height: 20px;
">
Hunger Plus, Inc.
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
答案 0 :(得分：0)
HTML不是图形格式，保证每个平台上的像素完美结果。对于像这样的东西，PDF更接近（或图像，完全丢失文本信息）。
HTML是“超文本标记语言”，因此它主要用于传输文本内容，附加标记有助于处理（呈现/使用）内容。
CSS在图形输出方面使它更具可预测性，但是假设任何东西仍然不是很安全（例如我使用的银行网站在我的桌面上看起来很破碎，因为我使用强制最小字体大小，这有点突破他们的表格的布局设计，抵消了与标签不同步的价值线。）
但这是HTML，你在谈论电子邮件。只要您只针对gmail，至少可以检查结果是什么样的。但是如果你想发送适当的通用电子邮件（不假设接收者正在使用Gmail应用程序阅读它），你实际上应该发送有效的纯文本版本（与HTML一起）。 HTML扩展甚至不是标准的一部分，并且仍然有大约3％的人使用纯文本邮件客户端（像我一样）。
那你的问题是什么，小文字？您的电子邮件是否应该主要在手机屏幕上阅读？然后创建具有较少列的表，因此它将足够窄？或者查看一些CSS魔术，为报告不同屏幕宽度的设备创建不同的布局变体。
无论哪种方式，您都不能指望像素完美渲染，因为每个设备都有不同的屏幕，或者用户可能只在窗口中运行邮件应用程序，或者用户可以强制执行不同的字体大小等。
所以这是正常的，不同的设备/应用程序会以不同的方式呈现您的HTML，如果您的HTML设计合理，它不会对您造成任何问题。
答案 1 :(得分：0)
我可能会误解，但看起来好像改变了第一行：
<table width=100% cellspacing="0" cellpadding="0" style="" class="">
到此：
<table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 600px;">
解决了这个问题。 <table width=100% ...>导致布局为全宽。编辑后的代码使电子邮件100％，但最多只有600px，因此电子邮件在大屏幕上会更宽，而在较小的屏幕上缩小。