HTML шаблон электронной почты шириной 100% не работает в Gmail - PullRequest
Новая
       47

HTML шаблон электронной почты шириной 100% не работает в Gmail

0 голосов
/ 18 января 2019

Я пытаюсь создать html шаблон электронной почты, и когда я тестирую свой шаблон, я заметил, что не могу получить мой шаблон шириной 100%. Там есть пустая область, на которую мой div не распространяется.

enter image description here

мой 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. В сети электронная почта отображается правильно

1 Ответ

0 голосов
/ 22 января 2019

Я сталкивался с этой проблемой раньше в Gmail, как на iOS, так и на Android.

Я использую следующий код для удаления желобов мобильного Gmail при сбросе CSS электронной почты, и, похоже, это помогает.: 

<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" в комментариях, но это просто ссылка, чтобы описать размер окна просмотра устройства.Вы можете создать больше таких медиазапросов для каждого дополнительного размера области просмотра, который вы хотите исправить.

...