Question

我有同样的问题，Cosmin Popovici在这个帖子https://litmus.com/community/discussions/6950-full-width-on-gmail-app-for-ios中指出，iOs上的Gmail，特别是iPhone 6，正在向右推送内容，并将其剪裁得有点像：

enter image description here

我已尝试过添加CSS代码的建议修复程序，该代码针对div gmail为主体生成，并在主包装器表中添加一个类，如下所示：

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

Answer 1

我也遇到了这个问题并且对u ~ div .wrapper {min-width: 100vw;}黑客抱有希望，但我从来没有同时修复Gmail iOS 和 Android。

我已经确定了以下代码，以便在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>

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

iPhone 6上的HTML Gmail将电子邮件内容推向右侧

1 个答案: