1
因此，我正在为我的公司构建一些新的模板以用于电子邮件广播，并且遇到了移动电子邮件客户端的一些麻烦。具体来说，我的文字在Android和iOS中太小了。Android上的Gmail/iOS上的默认邮件应用程序缩小文字
现在，我可以使用我的媒体查询来定位iOS，并根据需要调整字体大小，但根据我对Android的了解，这是不可能的，这让我想起了令人难以置信的小文本。
我的代码如下，我有问题的主要部分是bodyleft单元，其中字体大小是标准的16像素，并且看起来很好，无处不在，但移动。 -webkit-text-size-adjust：none;没有使用，因为我希望尺寸调整起来，而且这种情况在这种情况下并没有什么不同。
任何帮助将不胜感激，谢谢！
<style type="text/css">
td img {
display: block;
}
.ExternalClass * {
line-height: 100%;
}
@media screen and (max-width: 600px) {
body[yahoo] .border {
width:98% !important;
min-width:auto !important;
}
body[yahoo] .main {
width:100% !important;
}
body[yahoo] .body {
width:90% !important;
}
body[yahoo] .spacer {
display: none !important;
}
body[yahoo] .footer {
width:90% !important;
}
body[yahoo] .bodyleft {
float: left;
margin-bottom: 20px;
}
body[yahoo] .bodyright {
float: left;
width:100% !important;
}
body[yahoo] img {
height: auto !important;
}
body[yahoo] .sideimagesa {
float:left;
width:48% !important;
margin-bottom:10px !important;
}
body[yahoo] .sideimagesb {
float:right;
width:48% !important;
margin-bottom:10px !important;
}
}
</style>
</head>
<body yahoo="fix" style="margin:0px;" bgcolor="#EF9A9A">
<div>
<table style="border-collapse:collapse;" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#EF9A9A" style="padding-top:20px; padding-bottom:20px;"><table class="border" style="width:660px; min-width:660px; margin:auto; border-collapse:collapse;" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<td bgcolor="#F44336">
<table class="main" style="width:650px; border-collapse:collapse;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#FFFFFF">
<table class="main" style="width:650px; border-collapse:collapse;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="header" style="font-family:Arial, Helvetica, sans-serif;" align="center"><img style="display:block" src="http://images.theonlineimages.com/ima/650x200.jpg" alt="" width="100%" /></td>
</tr>
<tr>
<td class="headline" style="padding-top:15px; padding-bottom:15px;" align="center" bgcolor="#F44336"><strong><a style="font-family:Arial, Helvetica, sans-serif; font-size:24px; color:#ffffff; text-decoration:none;" href="http://en.wikipedia.org">This Can Be Your First Call to Action Link</a></strong></td>
</tr>
<tr>
<td style="padding-top:20px;">
<table class="body" style="width:625px; margin:auto; border-collapse:collapse;" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="bodyleft" style="font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#212121; line-height:22px;" valign="top">Any text you want to include to explain what you are offering would be placed here. This includes any and all incentives. The text can be <strong>bolded</strong> or <em>italicized</em> for emphasis. Individual segments of text can also have their sizes and colors changed in order to add emphasis that way.<br />
<br />
<strong><span style="color:#B71C1C">Header Text</span></strong> <br />
<br />
You can use headers to separate your ideas, and have <a style="color:#B71C1C" href="#">hyperlinks</a> throughout your text. Pictures on the right side can be used to show off what you are advertising. Greater or fewer images can be included, and they can be switched to the left side if preferred. Images will be entered at the exact widths shown, but heights can vary without issue.
<br />
<ul style="margin-top:19px;margin-bottom:19px;">
<li>A bullleted or numbered list</li>
<li>can be used</li>
<li>to itemize your text</li>
</ul>
All colors are completely up to you. This includes links, text, borders and backgrounds. Each of these can be changed to whatever color you like.<br />
<br />
<table style="border-collapse:collapse;" class="cta" width="100%" border="0" cellspacing="0" cellpadding="10">
<tr>
<td align="center" bgcolor="#F44336"><a style="font-family:Arial, Helvetica, sans-serif; font-size:36px; color:#ffffff; text-decoration:none; line-height:42px;" href="http://en.wikipedia.org"><strong>Press Here if You Want to
Learn More</strong></a></td>
</tr>
</table></td>
<td class="spacer" style="width:20px;"> </td>
<td class="bodyright" style="width:210px;" valign="top"><table class="sideimagesa" border="0" cellpadding="5" cellspacing="0" style="width:100%; border-collapse:collapse;">
<tr>
<td bgcolor="#F44336"><table style="width:100%; border-collapse:collapse;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="font-family:Arial, Helvetica, sans-serif;"><span class="header" style="font-family:Arial, Helvetica, sans-serif;"><img style="display:block" src="http://images.theonlineimages.com/ima/200x125.jpg" alt="" width="100%" /></span></td>
</tr>
</table></td>
</tr>
</table>
<table class="spacer" border="0" cellspacing="0" style="width:100%; border-collapse:collapse;">
<tr>
<td height="20"> </td>
</tr>
</table>
<table class="sideimagesb" border="0" cellpadding="5" cellspacing="0" style="width:100%; border-collapse:collapse;">
<tr>
<td bgcolor="#F44336"><table style="width:100%; border-collapse:collapse;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" bgcolor="#BDBDBD" style="font-family:Arial, Helvetica, sans-serif;"><span class="header" style="font-family:Arial, Helvetica, sans-serif;"><img style="display:block" src="http://images.theonlineimages.com/ima/200x125.jpg" alt="" width="100%" /></span></td>
</tr>
</table></td>
</tr>
</table>
<table class="spacer" border="0" cellspacing="0" style="width:100%; border-collapse:collapse;">
<tr>
<td height="20"> </td>
</tr>
</table>
<table class="sideimagesa" border="0" cellpadding="5" cellspacing="0" style="width:100%; border-collapse:collapse;">
<tr>
<td bgcolor="#F44336"><table style="width:100%; border-collapse:collapse;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" bgcolor="#BDBDBD" style="font-family:Arial, Helvetica, sans-serif;"><span class="header" style="font-family:Arial, Helvetica, sans-serif;"><img style="display:block" src="http://images.theonlineimages.com/ima/200x125.jpg" alt="" width="100%" /></span></td>
</tr>
</table></td>
</tr>
</table>
<table class="spacer" border="0" cellspacing="0" style="width:100%; border-collapse:collapse;">
<tr>
<td height="20"> </td>
</tr>
</table>
<table class="sideimagesb" border="0" cellpadding="5" cellspacing="0" style="width:100%; border-collapse:collapse;">
<tr>
<td bgcolor="#F44336"><table style="width:100%; border-collapse:collapse;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" bgcolor="#BDBDBD" style="font-family:Arial, Helvetica, sans-serif;"><span class="header" style="font-family:Arial, Helvetica, sans-serif;"><img style="display:block" src="http://images.theonlineimages.com/ima/200x125.jpg" alt="" width="100%" /></span></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td style="padding-top:20px; padding-bottom:20px;"><table class="footer" style="width:625px; margin:auto; border-collapse:collapse;" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#212121" align="center">You can put disclaimers, contact info, or any other footer information you might want to include here</td>
</tr>
</table></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</div>
</body>
</html>
Screenshot of the tiny text in Gmail
你是正确的。我忽略了宽度为660px，你知道哪些电子邮件客户端不支持EM和关键字吗？到目前为止，我从来没有遇到过问题。 – JoeyPhillips
这并不是说他们不被支持，而是没有一致性。 EM和百分比（以及关键字）都基于每个电子邮件客户端声明的默认字体大小，这意味着它不像网络上的标准。我并不是说你不可能在EM等方面取得成功，但强烈建议使用PX代替。 – Gortonington
伟大的提示，宽度声明确实是问题。我试着让模板只使用百分比宽度，并设置一个最大宽度，所以在桌面上它不会太大，并且它工作。在这个布局上看起来很丑陋，所以我不得不混淆其他一些布局思路，比如一些列布局。 – humulos