我创建了一个使用表格、tr、td 的电子邮件模板。一切似乎都很好，除了在 android 手机上它没有重新调整大小以适应屏幕.. 它在苹果产品上完美运行.. 我在网上搜索了一些，这个词似乎是 android 禁用了一些响应能力原因。必须有办法解决这个问题，因为大多数电子邮件都是在手机上检查的，其中不少是在 Android 上。
【问题讨论】：
标签： android responsive-design gmail html-email
Android 不支持响应式电子邮件，但有一些解决方法。 例如，您可以将所有更改为 .这将解决问题。它还会使这些单元格中的文本变为粗体，但您可以更改样式以强制其按您喜欢的方式呈现。
如果您在 Android 上谈论 Gmail，Gmail 应用程序也不支持响应式，但您可以强制它呈现为桌面。不幸的是，Gmail 没有解决方法，这将是迄今为止唯一的解决方案。
这里都是一步一步解释的： Hot to get a responsive email to work on Android
【讨论】：
正如其他人所指出的，Gmail 和一些 Android 股票电子邮件客户端不支持媒体查询。要覆盖这些客户，您需要混合设计。
混合设计无需使用媒体查询即可实现响应式、可变形的布局。它的核心是使用 max-width 和 min-width 来强加刚性基线（允许一些移动），并为无论如何都束缚在桌面上的 Outlook 强加一个固定的宽宽度。一旦设置了适合移动设备的基线，媒体查询会在支持它的客户端（如 iOS 邮件）中逐步增强电子邮件。
这是来自Fabio Carneiro's code samples on GitHub 的基本 2 列脚手架（全归功于他！）：
<!doctype html>
<html>
<body style="margin:0;">
<center>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
<!-- // 2-COLUMN SCAFFOLD [CENTERING, FLUID] -->
<tr>
<td align="center" height="100%" valign="top" width="100%">
<!--[if mso]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="660">
<tr>
<td align="center" valign="top" width="660">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:660px;">
<tr>
<td align="center" valign="top" style="font-size:0;">
<!--// DEVELOPER NOTES:
1. Setting font-size:0; is necessary to ensure
that there is no extra spacing introduced
between the centering divs that wrap each
of the columns. //-->
<!--[if mso]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="660">
<tr>
<td align="left" valign="top" width="330">
<![endif]-->
<div style="display:inline-block; max-width:50%; min-width:240px; vertical-align:top; width:100%;">
<!--// DEVELOPER NOTES:
1. To have each column center upon stacking,
wrap them in individual divs, set the same
max-width and width as the table within it,
and set display to inline-block; using
vertical-align is optional.
2. Setting min-width determines when the two
columns of this block will wrap; in this
case, when the total available width is
less than or equal to 480px. //-->
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:330px;">
<tr>
<td align="center" valign="top">
<!-- // REPLACE WITH BLOCK -->
<p style="background-color:#2BAADF; color:#FFFFFF; font:16px Helvetica, sans-serif, normal; margin:0 !important; padding:10px;">LEFT</p>
<!-- REPLACE WITH BLOCK // -->
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td align="left" valign="top" width="330">
<![endif]-->
<div style="display:inline-block; max-width:50%; min-width:240px; vertical-align:top; width:100%;">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:330px;">
<tr>
<td align="center" valign="top">
<!-- // REPLACE WITH BLOCK -->
<p style="background-color:#51BBE5; color:#FFFFFF; font:16px Helvetica, sans-serif, normal; margin:0 !important; padding:10px;">RIGHT</p>
<!-- REPLACE WITH BLOCK // -->
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- 2-COLUMN SCAFFOLD [CENTERING, FLUID] // -->
</table>
</center>
</body>
</html>在那个 repo 和其他地方有更多的脚手架和模式，但这显示了基本原理。
【讨论】：
我绝对同意设置：
<meta name="viewport" content="width=device-width, initial-scale=1">
我还建议使用诸如 http://templates.mailchimp.com/resources/inline-css/ 之类的 css 内联工具（如果您的外部资源尚未代表您执行此操作）以确保 gmail 选择样式。
此外，就 Gmail 中的一般缩放问题而言，我建议在您的关闭正文元素之前添加以下块（如此处推荐：http://freshinbox.com/blog/gmail-on-ios-increases-font-size-on-some-emails/）：
<div style="display:none; white-space:nowrap; font:15px courier; line-height:0; color: #ffffff;">
----------------------------------------
</div>
【讨论】：
如果您谈论的是 Android 上的 Gmail 应用程序（您将这个问题标记为），该应用程序本身不会通过媒体查询或样式标签进行移动，它会像您发现的那样将它们剥离。确保您尽可能内联以获得跨电子邮件客户端的最佳支持。
有一种方法可以通过结合使用可变宽度和固定宽度的桌子来调动它。但它不会是像素完美的。将固定宽度表视为流体表内的块（宽度=100%）。一旦达到设定的宽度，桌子就会相互堆叠。这当然适用于任何多列布局。单列是最安全的方法，因为不需要专注于堆叠。 不要犹豫使用嵌套在表格中的表格。对于我上面提到的使用流动和固定宽度表格的方法，对于两列布局，您的外部表格将是 100% 宽度，并且该表格内有两个固定宽度表格，它们是特定宽度并左右对齐。
可以让它在 Gmail 应用程序中看起来不错，但是您必须问自己两个概念，您是要优雅降级还是最低公分母？
优雅的降级意味着它在许多电子邮件客户端中看起来很棒，在 gmail 应用程序中也不错，或者最低公分母是单列并围绕它进行设计。
【讨论】：
您是否尝试过为您的 html 模板设置 Viewport 元标记？
<meta name="viewport" content="width=device-width, initial-scale=1">
【讨论】：