当从移动浏览器访问 Gmail 时，最大宽度在 html 电子邮件中不起作用？

Question

我试图拥有一个宽度为 600px 且最大宽度为 100% 的列

<table style="width:600px;max-width:100%" id="my-table">
    <tbody>
        <tr>
            <td> </td>
            <td > <img style="width:600px;max-width:100%"> </td>
            <td> </td>
        </tr>
    </tbody>
</table>

我在 Samsung Internet 和 Firefox 中的 gmail 中尝试过此操作，在这两种情况下，它显示的宽度都大于屏幕。我也尝试添加

<style>                              
@media screen and (max-width:500px) {
    table {
        max-width: 350px !important;
    }
}

</style>

但它也不起作用。不过它确实可以在 Gmail 应用程序上运行

Answer 1

Gmail 和某些电子邮件客户端对 CSS 的支持有限，并且样式可能无法按预期呈现。你可以试试这个：

<table width="100%" style="max-width:600px;">
    <tr>
        <td style="width:33.33%;"></td>
        <td style="width:33.33%;"><img src="your-image-url.jpg" style="max-width:100%; height:auto;"></td>
        <td style="width:33.33%;"></td>
    </tr>
</table>