#html #css #email #gmail
Вопрос:
У меня проблема с шаблоном электронной почты html в Gmail. Во всех других визуализированных браузерах/почтовых клиентах до сих пор это было хорошо, но я обнаружил проблему в приложении Gmail для Android (протестировано на Samsung Galaxy S9 ).
Снимок экрана отображаемой почты в приложении Gmail
Как вы можете видеть на изображении, большой заголовок рядом с изображением обрезан из — за переполнения-и у меня нет решения о том, как это предотвратить. Как уже говорилось ранее, до сих пор это не происходило ни на одном другом (мобильном) почтовом клиенте.
Найдено на стеке и других ресурсах, что приложение Gmail может увеличивать размер шрифта-опробовано после чаевых, которые я видел до сих пор, и все это без какого — либо положительного эффекта:
- !важно непосредственно на и/или с .список-название
- размер шрифта в pt вместо px (с и без !важно)
- spacer.gif как верхний ряд (создает огромное пустое пространство с левой стороны)
- пробел: nowrap; не может использоваться, потому что обычно эти заголовки больше одной строки, и это выглядит странно, когда они обрезаны переполнением:скрыто
- специальный класс с «u .gmail»
Даже если я изменю высоту изображения и текстового контейнера-это, конечно, повлияет на ВСЕ почтовые клиенты…
Примечание: Мне не разрешается вносить большие изменения в дизайн, поэтому на левой стороне должен быть img, а на правой-эти тексты.
У кого-нибудь есть дальнейшие предложения о том, как можно было бы предотвратить это отключение? Заранее благодарю вас!
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
span.yshortcuts {
color: #000;
background-color: none;
border: none;
}
span.yshortcuts:hover,
span.yshortcuts:active,
span.yshortcuts:focus {
color: #000;
background-color: none;
border: none;
}
html,
table {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", arial;
}
.main-tbody * {
margin: 0;
padding: 0;
}
.padding {
width: 50px;
}
.copyright {
width: 500px;
}
.location-row {
display: block !important;
}
.button-padding {
display: none !important;
}
@media screen and (max-width:620px) {
.location-row {
display: none !important;
}
.main-table {
width: 320px !important;
}
.inner-table {
width: 320px !important;
}
.image-listing {
width: 80px !important;
height: 60px !important;
max-width: 80px !important;
max-height: 60px !important;
}
.image-container {
width: 80px !important;
height: 60px !important;
}
.listing-title {
font-size: 14px !important;
line-height: 18px !important;
height: 35px !important;
}
.listing-price {
font-size: 12px !important;
height: 14px !important;
}
.button-padding {
display: block !important;
}
.copyright {
width: 320px !important;
}
}
a[x-apple-data-detectors],
.x-gmail-data-detectors,
.x-gmail-data-detectors *,
.aBn,
u #body a,
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
} <body id="body" style="font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', sans-serif; margin:0; min-width:320px;">
<table class="main-table" border="0" cellpadding="0" cellspacing="0" align="center" style="text-align: center; background: #f5f5f5; margin-inline-start: auto; margin-inline-end: auto;" width="600">
<tbody class="main-tbody">
<!-- Header -->
<tr align="center" style="margin: 0 auto; text-align: center;">
<td colspan="3">
<table class="inner-table" border="0" cellpadding="0" cellspacing="0" align="center" width="500" style="margin: 0 auto; text-align: center;">
<tbody align="center">
<tr>
<td colspan="3" height="40" style="height: 40px;">
<p style="margin: 0;"></p>
</td>
</tr>
<tr style="height: 40px; width: 100%;" align="center">
<td colspan="3" class="desktop-logo" width="500">
<img height="48" width="128" style="display: inline-block; vertical-align: middle" alt="Logo" src="https://via.placeholder.com/128x48.png?text=logo">
</td>
</tr>
<tr>
<td colspan="3" height="30" style="height: 30px;">
<p style="margin: 0;"></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- Header -->
<tr>
<td class="padding" width="50"></td>
<td>
<!-- Listing -->
<table class="inner-table" border="0" cellpadding="0" cellspacing="0" align="center" style="background-color: #ffffff;" width="500">
<tbody>
<tr class="list-container" style="width: 100%; max-height:140px;">
<td width="10"></td>
<td class="image-container" colspan="1" width="160" height="140" style="max-height:140px;">
<a href="">
<img class="image-listing" src="https://via.placeholder.com/160x120.jpeg?text=image" alt="" style="display: block; width: 100%; height: 100%; max-height: 120px;max-width: 100%; object-fit: cover" width="160" height="120">
</a>
</td>
<td width="10"></td>
<td class="text-container" colspan="2">
<table border="0" cellpadding="0" cellspacing="0" align="left" width="100%" style="width: 100%;">
<tbody>
<tr>
<td class="padding-top-inner-table" height="10" style="height: 10px;">
<p style="margin: 0;"></p>
</td>
</tr>
<tr>
<td>
<a href="" style="width: 500px">
<table border="0" cellpadding="0" cellspacing="0" align="left" width="500" style="width: 100%; text-align: left; color: #212338;">
<tbody>
<tr class="location-row">
<td style="width:100%; font-size: 12px; font-weight: 400;display: block; height:16px;" height="16">
<a href="" style="overflow: hidden; width:100%;height: 16px; margin: 0;text-decoration: none;color: #232f3f; display: block">
A small title
</a>
</td>
</tr>
<tr>
<td class="location-row" height="10" style="height: 10px;">
<p style="margin: 0;"></p>
</td>
</tr>
<tr>
<td class="listing-title" style="font-size: 16px; height:42px; font-weight: 400;display: block" height="42">
<a class="listing-title" href="" style="overflow: hidden; height: 42px; margin: 0;color: #232f3f;display: block; text-decoration: none; font-weight:bold; font-size: 16px;">
The very main big title which makes problems
</a>
</td>
</tr>
<tr class="location-row" height="27" style="height: 27px;">
<p style="margin: 0;"></p>
</tr>
<tr height="8" style="height: 8px;">
<p style="margin: 0;"></p>
</tr>
<tr height="19" style="height: 19px;">
<td class="listing-price" height="18" style="height:18px; margin: 0;font-weight: normal; font-size:14px; text-align: left; text-decoration: none;">
Tag 1 | Tag 2 | € price
</td>
</tr>
</tbody>
</table>
</a>
</td>
<td width="15" style="width: 15px;">
<p style="margin: 0;"></p>
</td>
</tr>
<tr>
<td colspan="3" height="8" style="height: 8px;">
<p style="margin: 0;"></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="5" height="10" style="height: 10px; background: #f5f5f5;">
<p style="margin: 0;"></p>
</td>
</tr>
</tbody>
</table>
<!-- Listing -->
</td>
<td class="padding"></td>
</tr>
</tbody>
</table> Комментарии:
1. Вы тестируете с адресом Gmail (или с адресом электронной почты, отправленным по электронной почте) или адресом электронной почты третьей стороны (например Outlook.com или Yahoo)? Это может сильно повлиять на поддержку CSS. (См . hteumeuleu.com/2019/… подробнее.)
2. Я тестирую с помощью @gmail.com адрес, уже читал о ГАНГЕ. Хорошая графика у вас на этой странице.
Ответ №1:
Похоже, я не могу воспроизвести проблему на вашем скриншоте в Gmail на Android. Я предполагаю, что в вашем коде есть что-то еще, противоречащее рендерингу Gmail. Одна вещь, которую я вижу, это <td> то, что в вашем коде здесь и там отсутствуют буквы s. Например, здесь:
<tr class="location-row" height="27" style="height: 27px;">
<p style="margin: 0;"></p>
</tr>
Это должно быть:
<tr class="location-row" height="27" style="height: 27px;">
<td><p style="margin: 0;"></p></td>
</tr>
В вашем коде также есть два <body> элемента.
Как общее правило для устранения неполадок Gmail, я бы:
- Убедитесь, что ваши
<style>теги находятся внутри<head>вашей электронной почты. Gmail не поддерживает<style>в<body>. - Убедитесь, что ваша электронная почта может правильно отображаться с
<style>тегами и без них. Мобильная веб-почта Gmail и приложения Gmail с учетными записями, отличными от Gmail, не поддерживают<style>теги. - Убедитесь, что общий вес вашего HTML-кода не превышает 102 Кб. Gmail обрезает электронную почту на 102 Кб и ограничивает
<style>до 16 Кб. - Используйте нейтральный сервис, который не изменяет ваш HTML-код для отправки тестов (например, Putsmail или посылка).
Вот старое сообщение, которое я написал об устранении неполадок в поддержке адаптивного дизайна Gmail .
Если это все еще не помогает, не стесняйтесь поделиться всем кодом, который вы отправили, чтобы вызвать эту ошибку в первую очередь.
Комментарии:
1. thx — я исправил отсутствующее <td>. двойное <td><тело> имеет место только здесь, очевидно, я дважды скопировал его внутри кода. Я протестировал код на реальных смартфонах в разных почтовых приложениях, и теперь я предполагаю, что это происходит из-за определенной высоты изображения, но мне нужно проверить это дальше