Gmail 仅在 iOS 上未扩展到 100% 宽度

Question

现在一直在为这个问题苦苦挣扎，这真的很烦我。基本上，我有一些我一直在使用的电子邮件模板，它们在所有客户端（Litmus 测试）上都运行良好，除了 Gmail，特别是在 iOS、Android 上运行良好。我遇到的问题是，我希望我的所有表格都是 100% 宽度，因此它们的大小都相同，但是 gmail 似乎根据内部内容调整了表格的大小。

这是我的代码的一部分：

<tr class="module bg-white" style="background-color:#fff;color:#23282b">
<td>
    <table class="container" cellpadding="0" cellspacing="0" border="0" role="presentation" width="100%"
        style="margin:0 auto;width:100%!important;max-width:600px!important">
        <tr>
            <td class="card-wrapper" align="center" valign="top" style="padding:0 15px 10px">
                <table cellpadding="0" cellspacing="0" border="0" role="presentation" width="100%">
                    <tr>
                        <td class="card-content bg-white border-lightgray"
                            style="padding:30px 20px 20px;background-color:#fff;color:#23282b;border:solid 1px #eee">
                            <h2
                                style="font-family:GTAmerica-Regular,Helvetica,Arial,sans-serif;margin:0 0 20px;font-size:18px;font-weight:700;line-height:22px">
                                YOUR DELIVERY DETAILS</h2>
                            <table class="delivery-details" cellpadding="0" cellspacing="0" border="0"
                                role="presentation" width="100%"
                                style="width:100%!important;max-width:600px!important">
                                <tr>
                                    <td style="vertical-align:top;padding-right:8.5px;padding-left:0">
                                        <h3
                                            style="font-family:GTAmerica-Regular,Helvetica,Arial,sans-serif;margin:0 0 15px;font-size:16px;font-weight:700;line-height:22px">
                                            Delivery Service</h3>
                                    </td>
                                    <td style="vertical-align:top;padding-right:0">
                                        <p
                                            style="font-family:GTAmerica-Regular,Helvetica,Arial,sans-serif;margin:0 0 10px;font-size:16px;font-weight:400;margin-bottom:15px;line-height:22px">
                                            Next Day</p>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="vertical-align:top;padding-right:8.5px;padding-left:0">
                                        <h3
                                            style="font-family:GTAmerica-Regular,Helvetica,Arial,sans-serif;margin:0 0 15px;font-size:16px;font-weight:700;line-height:22px">
                                            Delivery Address</h3>
                                    </td>
                                    <td style="vertical-align:top;padding-right:0">
                                        <p
                                            style="font-family:GTAmerica-Regular,Helvetica,Arial,sans-serif;margin:0 0 10px;font-size:16px;font-weight:400;margin-bottom:15px;line-height:22px">
                                            Fake Name <br>Fake House <br>Fake Street
                                            <br>Fake Town <br>UK <br>Fake Postcode</p>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</td>

在我的 phone 上它看起来像这样：

Email Result on iOS 15 gmail

有什么办法可以解决这个问题吗？在所有其他客户端上它扩展到 100% 没问题，谢谢！

Answer 1

这听起来可能是由于 this bug，其中 Gmail 将 .munged class 添加到 <table>s 和 <td>s 并带有 width:auto!important.

一个解决方案是为每个 <table> 和 <td> 可能受到影响的人添加一个 min-width:100%。

Gmail 仅在 iOS 上未扩展到 100% 宽度

Gmail not expanding to 100% width only on iOS

ios

email

gmail

width

litmus