让 Android 版 Gmail 应用程序呈现我的 HTML 电子邮件？答案

【问题标题】：Getting Gmail app for Android to render my HTML email?让 Android 版 Gmail 应用程序呈现我的 HTML 电子邮件？
【发布时间】：2014-04-11 15:39:15
【问题描述】：

我目前处于静止状态，确实需要一些帮助。我正在编写 HTML 电子邮件，这对我来说是第一次。我对 CSS 和 HTML 有基本的了解，但我一生都无法弄清楚如何解决这个 Gmail 问题，我什至知道原因是什么。似乎问题出在唯一的可编辑文本区域，即地址行 (Hi [name],)，也是唯一具有多列的行。看起来文本没有缩小以适应屏幕，导致相邻单元格发疯并扩大图片。它适用于我测试过的所有其他 ESP，甚至 Outlook。我附上了一张图片和我的代码。请，如果您有任何建议或资源，请帮助有需要的菜鸟。

messed up version on Android Gmail app code

<html>

<head>
    <title>Tradeshow_email_PARTY</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <!-- Save for Web Slices (Tradeshow_email_PARTY.jpg) -->
    <table id="Table_01" width="600" height="1046" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td colspan="3">
                <img src="http://i.imgur.com/m2GZSwm.png" style="display:block" width="600" height="408" alt="">
            </td>
        </tr>
        <tr>
            <td>
                <img src="http://i.imgur.com/RyJDbPa.png" style="display:block" width="47" height="40" alt="">
            </td>
            <td width="123" height="40" style="line-height: 0pt; font-weight: bolder;"><font face="arial" size="2px" color="#636564">Hi [name],</font>

            </td>
            <td>
                <img src="http://i.imgur.com/KUO971D.png" style="display:block" width="430" height="40" alt="">
            </td>
        </tr>
        <tr>
            <td colspan="3">
                <img src="http://i.imgur.com/nWU4N6L.png" style="display:block" width="600" height="598" alt="">
            </td>
        </tr>
    </table>
    <!-- End Save for Web Slices -->
</body>

【问题讨论】：

标签： android html email gmail

【解决方案1】：

您应该嵌套列而不是跨列。在所有不是 100% 行的表格单元格上设置宽度也很重要。示例：

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <!-- Save for Web Slices (Tradeshow_email_PARTY.jpg) -->
    <table id="Table_01" width="600" height="1046" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <img src="http://i.imgur.com/m2GZSwm.png" style="display:block" width="600" height="408" alt="">
            </td>
        </tr>
        <tr>
            <td>
              <table width="100%" border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <td width="47">
                      <img src="http://i.imgur.com/RyJDbPa.png" style="display:block" width="47" height="40" alt="">
                  </td>
                  <td width="123" height="40" style="font-family: Arial, Helvetica, sans-serif; font-size:12px; font-weight: bold; color:#636564;">
                    Hi [name],
                  </td>
                  <td width="40">
                      <img src="http://i.imgur.com/KUO971D.png" style="display:block" width="430" height="40" alt="">
                  </td>
                </tr>
              </table>

            </td>
        </tr>
        <tr>
            <td>
                <img src="http://i.imgur.com/nWU4N6L.png" style="display:block" width="600" height="598" alt="">
            </td>
        </tr>
    </table>
    <!-- End Save for Web Slices -->
</body>

您还会注意到我还为您解决的其他一些小问题。但最终，您在不应该使用的地方使用了大量图像。您的灰色边应为 html，红色区域以下的所有文本也应如此。

【讨论】：

感谢您的反馈。我敢肯定你会说，我是这方面的新手，填补了公司的空缺。我知道我的方法可以改进，但我得到了一个 jpeg 和一个时间表，哈哈。 Photoshop 是我知道如何将图像切成 html 表格的最简单方法，所以我就是这样做的。展望未来，我肯定会采取更好的方法。感谢您的帮助，它的代码更简洁，但在 Gmail 应用程序上看起来仍然一样。不过在其他 ESP 中仍然运行良好。说真的，感谢您的帮助

【解决方案2】：

这是我基于上述代码的尝试：

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <!-- Save for Web Slices (Tradeshow_email_PARTY.jpg) -->
    <table width="600" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <img src="http://i.imgur.com/m2GZSwm.png" style="display:block" width="600" height="408" alt="">
            </td>
        </tr>
        <tr>
            <td width="600" style="width:600px;min-width:600px;max-width:600px;">
              <table width="600" border="0" cellpadding="0" cellspacing="0" style="border-collapse:separate;">
                <tr>
                  <td width="47" style="width:47px;;min-width:47px;padding:0px;margin:0px;">
                      <img src="http://i.imgur.com/RyJDbPa.png" style="display:block;min-width:47px;width:47px;" width="47" height="40" alt="">
                  </td>
                  <td width="123" style="font-family: Arial, Helvetica, sans-serif; font-size:12px; font-weight: bold; color:#636564;width:123px;min-width:123px;">
                    Hi [name],
                    </td>
                  <td width="430" style="width:430px;min-width:430px;">
                      <img src="http://i.imgur.com/KUO971D.png" style="display:block;width:430px;min-width:430px;" width="430" height="40" alt="">
                  </td>
                </tr>
              </table>

            </td>
        </tr>
        <tr>
            <td>
                <img src="http://i.imgur.com/nWU4N6L.png" style="display:block" width="600" height="598" alt="">
            </td>
        </tr>
    </table>
    <!-- End Save for Web Slices -->
</body>

【讨论】：