在过去的几个小时里，我一直在尝试对电子邮件的顶部进行故障排除，我不知道为什么它不适合Gmail Android。所以基本上，在所有包含公司标志、超链接和立即订购按钮的td上，我都有类名.Stack。
我有一个媒体查询，最大宽度为480px。Stack将其设置为显示块和100%宽度。不管出于什么原因，它似乎不是为Gmail Mobile版本堆叠的，而是为iPhone版本堆叠的。
我正在Acid上测试电子邮件。有人知道我这里有没有遗漏什么吗？这是我的代码：
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"
lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" CONTENT="text/html; charset=UTF-8">
<meta name="viewport" CONTENT="width=device-width, initial-scale=1, user-scalable=yes">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<style type="text/css">
/*---------------------------- RESET STYLES ----------------------------*/
table, td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
.ExternalClass {
width: 100%;
}
a img {
border: none;
}
.yshortcuts, a .yshortcuts, a .yshortcuts:hover, a .yshortcuts:active, a .yshortcuts:focus {
background-color: transparent !important;
border: none !important;
color: inherit !important;
}
/*----- IOS LINKS FIX -----*/
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
.appleIOSFix a {
color: inherit;
text-decoration: none;
}
/*----- Insert FONT code here -----*/
}
/*----- GMAIL SPECIFIC -----*/
u + .body .Gmail-hide {
display: none;
}
u + .body .Gmail-show {
display: block !important;
}
/*---------------------------- MOBILE TARGETING ----------------------------*/
@media only screen and (max-device-width: 480px) {
/* TEMPLATE AND BASIC STYLES */
/*----- STRUCTURE -----*/
*[class=Container] {
max-width: 600px !important;
width: 100% !important;
}
*[class=Stack] {
display: block !important;
clear: both !important;
width: 100% !important;
}
*[class=TopCol] {
display: table-header-group !important;
clear: both !important;
}
*[class=BottomCol] {
display: table-footer-group !important;
width: 100% !important;
}
*[class=MidCol] {
display: table-row-group !important;
width: 100% !important;
}
*[class=RevStack] {
display: table-cell !important;
width: auto !important;
}
*[class=Fullwidth] {
width: 100% !important;
}
*[class=Halfwidth] {
width: 50% !important;
}
*[class=CenterTbl] {
margin: auto !important;
}
/*----- CONTENT -----*/
*[class=Img] {
max-width: 600px !important;
height: auto !important;
width: 100% !important;
}
*[class=Origsize] {
width: auto !important;
height: auto !important;
}
*[class=Halfsize] {
width: 50% !important;
height: auto !important;
}
*[class=Hide] {
display: none !important;
}
*[class=LeftAlign] {
text-align: left !important;
}
*[class=CenterAlign] {
text-align: center !important;
}
*[class=RightAlign] {
text-align: right !important;
}
*[class=LetterCap] {
text-transform: uppercase !important;
}
*[class=Headline] {
font-size: 30px !important;
line-height: 32px !important;
}
*[class=SubHdline] {
font-size: 24px !important;
line-height: 26px !important;
}
*[class=Body] {
font-size: 15px !important;
line-height: 18px !important;
}
*[class=Legal] {
font-size: 12px !important;
line-height: 12px !important;
}
*[class=WhiteLink] {
color: #FFFFFF !important;
}
*[class=DarkLink] {
color: #000000 !important;
}
/* Insert ADDITIONAL STYLES here - IF REQUIRED */
}
</style>
</head>
<body style="margin: 0; padding: 0; -webkit-font-smoothing: antialiased; width: 100%; -webkit-text-size-adjust: none;" class="body" >
<table role="presentation" Width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">
<tbody>
<tr>
<td align="center"><!--Begin CONTAINER-->
<table role="presentation" width="600" border="0" cellspacing="0" cellpadding="0" class="Container">
<tbody>
<tr>
<td align="center" bgcolor="#FFFFFF">
<main>
<!--Begin 1COLTBL-->
<table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#d52027">
<tbody>
<tr>
<td align="center" style="padding: 14px 0px 14px 0px;">
<!--Begin 3COLTBL-->
<table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#d52027">
<tbody>
<tr>
<td width="30" class="Stack"></td>
<td class="Stack" align="center">
<!--Begin IMGSML-->
<div><img role="presentation" src="https://images.unsplash.com/photo-1496200186974-4293800e2c20?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3432&q=80" width="140" height="79" style="vertical-align: bottom;" border="0"></div>
<!--End IMGSML-->
</td>
<td width="100" class="Stack"> </td>
<td class="Stack" align="center" style="padding: 0px 0px 0px 0px;"><a href="#" target="_blank" style="text-transform: uppercase; color: #ffffff; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 14px;">Locations</a></td>
<td class="Stack" width="20"> </td>
<td class="Stack" align="center" style="padding: 0px 0px 0px 0px;"><a href="#" target="_blank" style="text-transform: uppercase; color: #ffffff; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 14px;">Menu</a></td>
<td class="Stack" width="20"> </td>
<td class="Stack" align="center" style="padding: 0px 0px 0px 0px;">
<!--Begin BTNAMPRI-->
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" valign="middle" bgcolor="#ffffff" class="ordernowbutton" style="-moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; padding: 10px 16px 10px 16px;"><div><a href="#" target="_blank" class="ordernowtext" style="color: #d52027; display: inline-block; font-family: Arial, Helvetica, sans-serif; font-size: 14px; text-align: center; text-decoration: none; width: 100%; -webkit-text-size-adjust: none; white-space: nowrap; text-transform: uppercase;" class="Fullwidth">Order Now</a></div></td>
</tr>
</tbody>
</table>
<!--End BTNAMPRI--->
</td>
<td class="Stack" width="30"></td>
</tr>
</tbody>
</table>
<!--End 3COLTBL-->
</td>
</tr>
</tbody>
</table>
<!--End 1COLTBL-->
</td>
</tr>
</tbody>
</table>
<!--End CONTAINER--></td>
</tr>
</tbody>
</table>
</body>
</html>如果Gmail在其中发现不赞成的内容，它将删除整个<style>块。
它不赞成*[class=Legal]和类似的结构。这在过去对雅虎来说可能是必要的，但现在已经不是了。因此，继续将其更改为正常格式，即.Legal。
如果不起作用，请将移动样式放在自己的<style>块中，然后重试。可能还有其他它不喜欢的东西。
另一件需要知道的事情是，Gmail有不同的版本。所以，如果你看到的是一个使用IMAP/POP的Gmail，它不支持<head>任何东西——它会被完全剥离。因此，您必须仅依靠内联代码来实现这一点。所以内联代码应该已经有响应了。