Html Android 上的电子邮件模板没有响应

Question

我已经使用表格、tr、td 创建了一个电子邮件模板。一切似乎都很好，除了在 android 手机上它没有重新调整大小以适合屏幕。它在苹果产品上完美运行。我在网上搜索了一些，这个词似乎是 android 由于某种原因禁用了响应能力。必须有办法解决这个问题，因为大多数电子邮件都是在手机上检查的，其中相当一部分是在 android.

上

Answer 1

您是否尝试过为您的 html 模板设置视口元标记？

<meta name="viewport" content="width=device-width, initial-scale=1">

Answer 2

如果您在 Android 上谈论 Gmail 应用程序（这是您将此问题标记为的内容），该应用程序本身不会使用媒体查询或样式标签进行调动，它会像您发现的那样剥离它们。确保尽可能内联以获得跨电子邮件客户端的最佳支持。

有一种方法可以通过结合使用流体和固定宽度 tables 来使其移动。但它不会是像素完美的。将固定宽度 tables 视为流体 table（宽度=100%）内的块。一旦达到设置的宽度，表格就会一个接一个地堆叠起来。这当然适用于任何多列布局。单列是最安全的方法，因为不需要专注于堆叠。不要犹豫，使用嵌套在 table 中的 table 嵌套在 table 中。对于我上面提到的使用可变宽度和固定宽度 tables 的方法，对于两列布局，您的外部 table 宽度为 100%，内部有两个固定宽度 tables table 是一个特定的宽度并且左右对齐。

可以让它在 Gmail 应用程序中看起来不错，但是您必须问自己两个概念，您是要优雅降级还是最小公分母？

优雅的降级意味着它在许多电子邮件客户端中看起来很棒，在 gmail 应用程序中看起来不错，或者最低公分母是单列并围绕它进行设计。

Answer 3

我绝对同意设置：

<meta name="viewport" content="width=device-width, initial-scale=1">

我还建议使用 css 内联工具，例如这个 http://templates.mailchimp.com/resources/inline-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>

Answer 4

正如其他一些人指出的那样，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>

该回购协议和其他地方有更多的脚手架和模式，但这显示了基本原则在起作用。

Answer 5

Android 不支持响应式电子邮件，但有一些解决方法。例如，您可以将所有更改为 .这将解决问题。它还会使这些单元格中的文本变为粗体，但您可以更改样式以强制其按您喜欢的方式呈现。

如果您在 Android 上谈论 Gmail，Gmail 应用程序也不支持响应式，但您可以强制它呈现为桌面。不幸的是，没有针对 Gmail 的解决方法，这将是目前唯一的解决方案。

这里一步一步解释： Hot to get a responsive email to work on Android

Html Android 上的电子邮件模板没有响应

Html Email Template on Android not responsive

android

responsive-design

gmail

html-email