Question

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

有人如何解决这个问题？我希望我的单元格能够叠加，它在Mail iOS，Outlook iOS上运行良好，但不适用于Gmail ......

感谢您的建议！

Answer 1

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

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

以下是不使用媒体查询（根据Fabio文件改编）堆叠的2列布局示例：

<!-- // 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电子邮件

1 个答案: