Question

正在构建一个自适应的HTML / CSS电子邮件，并设法使用我所知道的所有技巧使其在大多数地方都能正常工作......但我目前在使用Gmail应用程序时遇到了真正的问题（在HTC One上）迷你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应用中排列这些块 - 调整图像部分大小，调整文本部分大小，嵌套更多表格，以及背景颜色...现在我没有想法了！

感谢任何帮助！ StackOverflow上的长期用户，第一次海报：）

******** ******** EDIT 好的，以后进行了如此多的调整......它得到了很大的改进，它只是没有正确对齐...

请参见此处的图片：http://s16.postimg.org/kzm0gd4k5/Screenshot_2015_08_07_10_43_18.png

这是因为我必须左对齐第一个嵌套表（左列，显示为图像中的第一个块）和右对齐第二个（右列，图像的底部），但是我想知道是否还有另外一种方法可以解决这个问题，而不是将它搞砸了Gmail应用程序？

Answer 1

所以我发现这都是因为Gmail应用程序的“自动调整大小”或“自动调整”选项！

解决方案是将“最小宽度：620px”（我最大的电子邮件的大小）添加到任何620px全宽部分。

有时它只是找到正确的搜索内容是有帮助的：）

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

以为我会发布答案，因为如果有人在将来发现这个问题我会得到它！

Gmail应用中的HTML电子邮件无法呈现

1 个答案: