ios - 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>

在我的手机上它看起来像这样:

Email Result on iOS 15 gmail

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

Answer 1

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

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