Есть ли способ отключения функции автоматического изменения размера Gmail в макете электронной почты?

Я размещаю электронное письмо для просмотра в браузерах и мобильных платформах, и в основном все идет хорошо. Он выложен в таблицах, используя встроенный стиль и т.д. Однако, несмотря на медиа-запрос с эффектом максимальной ширины 600 пикселей, приложение Gmail, по крайней мере, на моем и одном другом Android, к которому я имею доступ, выбирает изменение размеров изображений и макет, чтобы вписаться в него, вместо того, чтобы использовать медиа-запрос или позволить ему вставлять себя в окно, как правило, любой из них будет в порядке.

Для личного использования я могу "отключить автоматическое изменение размера" на моем телефоне, а затем электронная почта выкладывается, как в браузере.

Есть ли способ либо указать приложение Gmail, либо не автоматически изменять размер электронной почты или вместо этого использовать медиа-запрос?

Ответ 1

Поскольку Google делает сам (sic!) здесь, вы должны добавить небольшой хак поверх шаблона сразу после тэга <body>:

<!-- Gmail hack -->
<div style="display:none; white-space:nowrap; font:15px courier; color:#ffffff; line-height:0; width:600px !important; min-width:600px !important; max-width:600px !important;">&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>
<!-- /Gmail hack -->

Так как Gmail и Inbox игнорируют display:none, взлома затронет только этих двух клиентов.

Ответ 2

<meta name="viewport" content="width=device-width, initial-scale=1"/>

Затем установите атрибут style на изображении (1px gif works), который охватывает всю ширину страницы (style="min-width:600px;"). Все будет правильно выложено, и оно будет прокручиваться.

Gmail вообще не поддерживает мультимедийные запросы или тег стиля вообще, поэтому мы должны перемещать все в ряд.

Ответ 3

Вдохновленный css-tricks.com, этот блок кода решил мою проблему. Поместите его прямо перед </body>.

<table class="gmail-app-fix">
    <tr>
        <td>
            <table cellpadding="0" cellspacing="0" border="0" align="center" width="600">
                <tr>
                    <td cellpadding="0" cellspacing="0" border="0" height="1"; style="line-height: 1px; min-width: 200px;">
                        <img src="transparent.gif" width="200" height="1" style="display: block; max-height: 1px; min-height: 1px; min-width: 200px; width: 200px;"/>
                    </td>
                    <td cellpadding="0" cellspacing="0" border="0" height="1"; style="line-height: 1px; min-width: 200px;">
                        <img src="transparent.gif" width="200" height="1" style="display: block; max-height: 1px; min-height: 1px; min-width: 200px; width: 200px;"/>
                    </td>
                    <td cellpadding="0" cellspacing="0" border="0" height="1"; style="line-height: 1px; min-width: 200px;">
                        <img src="transparent.gif" width="200" height="1" style="display: block; max-height: 1px; min-height: 1px; min-width: 200px; width: 200px;"/>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

(Протестировано с Gmail 6.0 и Inbox 1.20 на Android 5.0.1, разрешение 720x1280 (работает как в портретной, так и в альбомной ориентации).

Ответ 4

Я просто добавил style = "min-width: 290px;" на мой внешний стол, который является самым маленьким размером моего отзывчивого сообщения электронной почты и его остановил перемещение моих блоков вокруг и не автомасштабирует. Это означает, что в приложении Gmail электронная почта отображается как целое электронное письмо.