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

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

gmail

iPhone 6上的HTML Gmail将电子邮件内容推到右侧,gmail,html-email,Gmail,Html Email,科斯明·波波维奇（Cosmin Popovici）在这篇文章中也指出了同样的问题，iOs上的Gmail，特别是iPhone 6，正在将内容向右推，并将其切割成这样：我已经尝试过添加CSS代码的建议修复方法，这些代码的目标是gmail为body生成的div，在主包装表中添加一个类，如下所示： <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" con

科斯明·波波维奇（Cosmin Popovici）在这篇文章中也指出了同样的问题，iOs上的Gmail，特别是iPhone 6，正在将内容向右推，并将其切割成这样：

我已经尝试过添加CSS代码的建议修复方法，这些代码的目标是gmail为body生成的div，在主包装表中添加一个类，如下所示：

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


@仅介质屏幕和（最大宽度：599px）{
u~div.包装{最小宽度：100vw；}
}

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

以下是我的一些代码：

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


@媒体屏幕和屏幕（最大宽度：480px）{
u~div{
最小宽度：100vw；
}
}
/**内容在这里**/

我也遇到过这个问题，我对

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

hack抱有希望，但我从未让它同时修复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 4、4S、5、5S、5C和5SE*/
@仅介质屏幕和（最小设备宽度：320px）和（最大设备宽度：374px）{
.手机壳{
最小宽度：320px！重要；
}
}
/*iPhone 6、6S、7、8和X*/
@仅介质屏幕和（最小设备宽度：375px）和（最大设备宽度：413px）{
.手机壳{
最小宽度：375px！重要；
}
}
/*iPhone 6+、7+和8+手机*/
@仅介质屏幕和（最小设备宽度：414px）{
.手机壳{
最小宽度：414px！重要；
}
}

为每个要修复的附加视口大小创建一个媒体查询。

我看到您的最小宽度为750px，您在代码中的任何地方都没有过度写入此项？@Syfer Nope。总是750或更少那么它不应该是最大宽度750吗？最小宽度意味着它不会小于给定的数字。