iPhone 6 上的 HTML Gmail 将电子邮件内容推送到右侧答案

【问题标题】：HTML Gmail on iPhone 6 pushes email content to the rightiPhone 6 上的 HTML Gmail 将电子邮件内容推送到右侧
【发布时间】：2018-06-11 17:48:43
【问题描述】：

我遇到了 Cosmin Popovici 在此线程 https://litmus.com/community/discussions/6950-full-width-on-gmail-app-for-ios 中指出的相同问题，其中 iO 上的 Gmail，尤其是 iPhone 6，正在将内容推送到右侧并有点像这样：

我已经尝试了添加针对 div gmail 为正文生成的 CSS 代码的建议修复，向主包装表添加一个类，如下所示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="x-apple-disable-message-reformatting" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <style type="text/css">

      @media only screen and (max-width: 599px) {

        u ~ div .wrapper {min-width: 100vw;}
      }

    </style>
  </head>
  <body style="box-sizing:border-box;margin:0;padding:0;width:100%;">

    <table class="wrapper" bgcolor="#EEEEEE" cellpadding="0" cellspacing="0" width="100%">
      <tr>
        <td>

        </td>
      </tr>
    </table>

  </body>
 </html>

但这对我根本不起作用。有没有人尝试过其他有效的方法？

这是我的一些代码：

<style>
    @media screen and (max-width: 480px) {
            u~div {
                min-width: 100vw;
            }
        }
</style>

 <body>
<table class="wrapper" width="98%" border="0" cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
            <td align="center" valign="top">
                <table class="mobile-shell" width="750" border="0" cellspacing="0" cellpadding="0">
                    <tbody>
                        <tr>
                            <td width="750" style="font-family: Arial, Helvetica, sans-serif !important; font-size: 0pt; font-weight: normal; line-height: 0pt; margin: 0; min-width: 750px; padding: 0; width: 750px;">
                                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                    <tbody>
                                        <tr>
                                            <td>
                                                /** Content goes here **/
                                            </td>
                                        </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

【问题讨论】：

我看到你的最小宽度是 750 像素，你没有在代码中的任何地方写过这个吗？
@Syfer 不。总是 750 或更少
那么不应该是 max-width 750 吗？最小宽度意味着它不会小于给定的数字。

标签： gmail html-email

【解决方案1】：

我也遇到过这个问题，我对u ~ div .wrapper {min-width: 100vw;} hack 寄予厚望，但我从来没有得到它同时修复 Gmail iOS 和 Android。 p>

我已确定使用以下代码来删除 Gmail iOS 应用中的右侧装订线。这有点冗长，但应该让电子邮件在 Gmail 中逐个发送。

<style>
    /* iPhone 4, 4S, 5, 5S, 5C, and 5SE */
    @media only screen and (min-device-width: 320px) and (max-device-width: 374px) {
        .mobile-shell {
            min-width: 320px !important;
        }
    }
    /* iPhone 6, 6S, 7, 8, and X */
    @media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
        .mobile-shell {
            min-width: 375px !important;
        }
    }
    /* iPhone 6+, 7+, and 8+ */
    @media only screen and (min-device-width: 414px) {
        .mobile-shell {
            min-width: 414px !important;
        }
    }
</style>

为您要修复的每个其他视口大小创建这些媒体查询之一。

【讨论】：