muskos
@muskos
web dev

Проблема с вёрсткой письма gmail mobile отображение в оригинале?

Здравствуйте.
Возникла проблема. Сверстал письмо, вёрстка табличная, почтовые клиенты в браузерах показывают нормально, почтовый клиент яндекса на телефоне показывает нормально. А gmail ломает вёрстку.

Не могу разобрать проблему.
Вот код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta  name="viewport" content="width=600px, initial-scale=1.0, maximum-scale=1.0" /> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Document</title>
</head>
<body>
    <table width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
        <tbody>
            <tr>
                <td>
                    <table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
                        <tr>
                            <td>
                                123
                                <!-- <center>
                                    <table width="560" cellpadding="0" cellspacing="0" border="0">
                                        <tr>
                                            <td>
                                                12123
                                            </td>
                                        </tr>
                                    </table>
                                </center> -->
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
    
</body>
</html>


Отправляю письма с помощью сервиса: https://putsmail.com/tests/
В гмэйле в письме, под шапкой появляется сообщение:
Вид сообщения отформатирован под ваш экран. Показать оригинал?

И так же происходит с моим письмом. Нажимаю показать оригинал - вёрстка идеальная. А если не просматривать оригинал письма, то вёрстка едет.
В чём может быть проблема?
  • Вопрос задан
  • 1862 просмотра
Решения вопроса 1
muskos
@muskos Автор вопроса
web dev
Вот правильный ответ.
После тега body вставить вот такой кусок:
<div style="display:none; white-space:nowrap; font:15px courier; line-height:0;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>


Пока работает
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@Morbit
Попробуйте для таблицы определяющей ширину письма задать min-width равный ширине макета
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы