在移动设备上为 Gmail 堆叠电子邮件

Question

移动版 Gmail 无法识别我的媒体查询。

有人知道如何解决这个问题吗？我希望我的单元格能够堆叠，它在 Mail iOS、Outlook iOS 上都能正常工作，但在 Gmail 上却不行...

感谢您的建议！

Answer 1

Gmail 不支持媒体查询（或 <style> 标签），因此为了让 table 单元格在窄宽度上堆叠，您必须编写 混合电子邮件.

These patterns by Fabio Carniero 用行动证明这一原则。我强烈建议您查看这些脚手架，因为它们在移动 Gmail 以及其他不支持媒体查询的电子邮件客户端中实现了列堆叠。

下面是一个 2 列布局的示例，它在不使用媒体查询的情况下堆叠（改编自 Fabio 的文件）：

<!-- // 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;">
                    <!--[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%;">
                        <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:330px;">
                            <tr>
                                <td align="center" valign="top">
                                    LEFT
                                </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">
                                    RIGHT
                                </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] // -->

在移动设备上为 Gmail 堆叠电子邮件

Stack Email for Gmail on mobile

email

gmail

stack

html-email

media-queries