HTML Gmail 应用程序上的电子邮件未呈现

Question

一直在构建响应式 HTML/CSS 电子邮件，并设法使用我所知道的所有技巧使其在大多数地方都能正常工作...但我目前在使用 Gmail 应用程序时遇到了实际问题（在HTC One Mini 2，如果它有所作为）。

它应该（大致）做的是： http://s21.postimg.org/7aw1izuxj/shoulddo.png

它的作用是这样的：s4.postimg.org/g9dm9t68d/isdo.png

（忽略奇怪的颜色 - 它有助于我调试）

执行此操作的代码是：

    <table class="cooptwocol" style="background-color: red; border-collapse: collapse;" cellspacing="0" cellpadding="0">
<tr>
<td>
    <table class="coophalfwidth" align="left" style="width: 300px; background-color: #f2f2f2; border-collapse: collapse;" cellspacing="0" cellpadding="0">
        <tr>
            <td><img src="300x300.jpg" width="300px"></td>
        </tr>
    </table>
        <!--[if mso]></td><td><![endif]-->
    <table class="coophalfwidth" align="left" style="width:300px; background-color: #f2f2f2; border-collapse: collapse;" cellspacing="0" cellpadding="0">
        <tr>
            <td style="width: 15px; font-size: 15px; background-color: blue;" valign="top" rowspan="7">&nbsp;</td>
            <td colspan="3" style="font-size: 15px;">&nbsp;</td>
            <td style="width: 15px; font-size: 15px; background-color: blue;" valign="top" rowspan="7">&nbsp;</td>
        </tr>
        <tr>
            <td colspan="3" style="font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold; color: #000000;">Title One</td>
        </tr>
        <tr>
            <td colspan="3" style="font-size: 15px;">&nbsp;</td>
        </tr>
        <tr>
            <td colspan="3" style="font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; color: #000000;">Lorem ipsum dolor sit amet, consectetur 
            adipiscing elit. Vestibulum ac hendrerit nibh, ac efficitur libero. Mauris dapibus ante non urna varius dignissim. Phasellus eget finibus orci. Morbi vel dictum turpis. In finibus hendrerit 
            nisi eu accumsan. In nec ante, sed scelerisque eros. In accumsan rhoncus.</td>
        </tr>
        <tr>
            <td colspan="3" style="font-size: 15px;">&nbsp;</td>
        </tr>
        <tr>
            <td><img src="ctaleftgrey.jpg" style="border: 0; text-decoration: none;" align="right"></td>
            <td style="font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; background-color: #ec6608;">Call to action</td>
            <td><img src="ctarightgrey.jpg" style="border: 0; text-decoration: none;" align="left"></td>
        </tr>
        <tr>
            <td colspan="3" style="font-size: 15px;">&nbsp;</td>
        </tr>
    </table>
</td>
</tr>
</table>

（没有必要为类发布 CSS，因为 Gmail 应用程序无论如何都会忽略它们！）

我已经尝试了所有我能想到的方法，但没有任何方法可以帮助这些块在 Gmail 应用程序中排列 - 调整图像部分的大小，调整文本部分的大小，进一步嵌套 tables，处理背景颜色...现在我没主意了！

感谢任何帮助！长期用户，第一次在 Whosebug 发帖:)

********编辑******** 好吧，后来做了很多调整……改进了很多，只是没有正确对齐……

在此处查看图片：http://s16.postimg.org/kzm0gd4k5/Screenshot_2015_08_07_10_43_18.png

之所以这样，是因为我必须左对齐第一个嵌套 table（左列，显示为图像中的第一个块）并右对齐第二个（右列，图像的底部） )，但我想知道是否有另一种方法可以做到这一点，而不会在 Gmail 应用程序上造成混乱？

Answer 1

所以我发现这都是因为 Gmail 应用程序的 "Auto-resize" 或 "Auto-fit" 选项！

解决方案是在任何 620 像素全宽部分添加 "min-width: 620px"（我的电子邮件最宽的大小）。

有时候，找到正确的搜索内容是有帮助的:)

来源：https://litmus.com/community/discussions/257-gmail-app-android-how-to-stop-text-from-auto-resizing

我想我会 post 我得到的答案，以防将来有人找到它！

HTML Gmail 应用程序上的电子邮件未呈现

HTML Email on Gmail App not rendering

html

css

email

gmail

html-email