Есть ли способ отключения функции автоматического изменения размера 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;"> </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 электронная почта отображается как целое электронное письмо.
