HTML 电子邮件模板宽度 100% 在 gmail 中不起作用答案

【问题标题】：HTML email template width 100% not working in gmailHTML 电子邮件模板宽度 100% 在 gmail 中不起作用
【发布时间】：2019-01-18 08:00:11
【问题描述】：

我正在尝试创建一个 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 移动应用中。在网络中，电子邮件显示正确

【问题讨论】：

检查那个组件的父组件，它的大小决定了“100%”会带你走多远
Gmail 在屏幕的左右两边都有边距，所以电子邮件永远不会碰到边缘 - 这难道不是问题吗？

标签： html css html-email email-templates

【解决方案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>

我知道这些在 cmets 中说“iPhone”，但这只是描述设备视口大小的参考。您可以为要修复的每个额外视口大小创建更多此类媒体查询。

【讨论】：