Question

我正在尝试创建一个html电子邮件模板，当我测试我的模板时，我发现我无法使我的模板具有100％的宽度。我的div不会延伸到一个空白区域。

我的html代码

                        "<html style=\"font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size: 14px; min-width:100% !important; margin: 0;\">" +
                        "<head>\n" +
                        "<meta name=\"viewport\" content=\"width=device-width\" />\n" +
                        "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />\n" +
                        "<title>Spokk email service</title>\n" +
                        "\n" +
                        "<style type=\"text/css\">\n" +
                        "@media only screen and (max-width: 640px) {\n" +
                        "}\n" +
                        "</style>\n" +
                        "</head>" +
                        "<body style=\"font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; min-width: 100%!important; height: 100%; line-height: 1.6em; background-color: #f6f6f6; margin: 0;\" bgcolor=\"#f6f6f6\">" +
                        "Mom" +
                        "</body/>"+
                        "</html>

有引号是因为我正在Java文件中使用它。如何将电子邮件模板的宽度设置为100％。

仅在gmail移动应用中存在此问题。在网络中，电子邮件会正确显示

Answer 1

我以前在iOS和Android的Gmail中都遇到过此问题。

我正在使用以下代码在电子邮件的CSS重置中删除移动Gmail的装订线，这似乎可以解决问题：

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

我知道他们在评论中说“ iPhone”，但这仅是描述设备视口大小的参考。您可以为要修复的每个其他视口尺寸创建更多此类媒体查询。

HTML电子邮件模板宽度100％无法在gmail中使用

1 个答案: