1
Итак, я работаю над созданием новых шаблонов для моей компании, которые будут использоваться в широковещательных рассылках электронной почты, и у меня возникают проблемы с мобильными почтовыми клиентами. В частности, мой текст слишком мал в Android и iOS.Gmail в приложении Android/Default Mail на iOS сокращении текста
Теперь я могу использовать свой медиа-запрос для целевой iOS, если необходимо, и отрегулировать размер шрифта по своему усмотрению, но это невозможно, насколько я знаю для Android, оставляя меня с невероятно крошечным текстом.
Мой код ниже, основная часть, с которой я столкнулся, - это ячейка bodyleft, где размер шрифта составляет стандартный 16 пикселей и отлично выглядит везде, кроме мобильного. -webkit-text-size-adjust: none; не использовался, так как я хочу, чтобы размер корректировался, и в любом случае это не повлияло на это.
Любая помощь была бы высоко оценена, спасибо!
<style type="text/css">
td img {
display: block;
}
.ExternalClass * {
line-height: 100%;
}
@media screen and (max-width: 600px) {
body[yahoo] .border {
width:98% !important;
min-width:auto !important;
}
body[yahoo] .main {
width:100% !important;
}
body[yahoo] .body {
width:90% !important;
}
body[yahoo] .spacer {
display: none !important;
}
body[yahoo] .footer {
width:90% !important;
}
body[yahoo] .bodyleft {
float: left;
margin-bottom: 20px;
}
body[yahoo] .bodyright {
float: left;
width:100% !important;
}
body[yahoo] img {
height: auto !important;
}
body[yahoo] .sideimagesa {
float:left;
width:48% !important;
margin-bottom:10px !important;
}
body[yahoo] .sideimagesb {
float:right;
width:48% !important;
margin-bottom:10px !important;
}
}
</style>
</head>
<body yahoo="fix" style="margin:0px;" bgcolor="#EF9A9A">
<div>
<table style="border-collapse:collapse;" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#EF9A9A" style="padding-top:20px; padding-bottom:20px;"><table class="border" style="width:660px; min-width:660px; margin:auto; border-collapse:collapse;" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<td bgcolor="#F44336">
<table class="main" style="width:650px; border-collapse:collapse;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#FFFFFF">
<table class="main" style="width:650px; border-collapse:collapse;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="header" style="font-family:Arial, Helvetica, sans-serif;" align="center"><img style="display:block" src="http://images.theonlineimages.com/ima/650x200.jpg" alt="" width="100%" /></td>
</tr>
<tr>
<td class="headline" style="padding-top:15px; padding-bottom:15px;" align="center" bgcolor="#F44336"><strong><a style="font-family:Arial, Helvetica, sans-serif; font-size:24px; color:#ffffff; text-decoration:none;" href="http://en.wikipedia.org">This Can Be Your First Call to Action Link</a></strong></td>
</tr>
<tr>
<td style="padding-top:20px;">
<table class="body" style="width:625px; margin:auto; border-collapse:collapse;" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="bodyleft" style="font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#212121; line-height:22px;" valign="top">Any text you want to include to explain what you are offering would be placed here. This includes any and all incentives. The text can be <strong>bolded</strong> or <em>italicized</em> for emphasis. Individual segments of text can also have their sizes and colors changed in order to add emphasis that way.<br />
<br />
<strong><span style="color:#B71C1C">Header Text</span></strong> <br />
<br />
You can use headers to separate your ideas, and have <a style="color:#B71C1C" href="#">hyperlinks</a> throughout your text. Pictures on the right side can be used to show off what you are advertising. Greater or fewer images can be included, and they can be switched to the left side if preferred. Images will be entered at the exact widths shown, but heights can vary without issue.
<br />
<ul style="margin-top:19px;margin-bottom:19px;">
<li>A bullleted or numbered list</li>
<li>can be used</li>
<li>to itemize your text</li>
</ul>
All colors are completely up to you. This includes links, text, borders and backgrounds. Each of these can be changed to whatever color you like.<br />
<br />
<table style="border-collapse:collapse;" class="cta" width="100%" border="0" cellspacing="0" cellpadding="10">
<tr>
<td align="center" bgcolor="#F44336"><a style="font-family:Arial, Helvetica, sans-serif; font-size:36px; color:#ffffff; text-decoration:none; line-height:42px;" href="http://en.wikipedia.org"><strong>Press Here if You Want to
Learn More</strong></a></td>
</tr>
</table></td>
<td class="spacer" style="width:20px;"> </td>
<td class="bodyright" style="width:210px;" valign="top"><table class="sideimagesa" border="0" cellpadding="5" cellspacing="0" style="width:100%; border-collapse:collapse;">
<tr>
<td bgcolor="#F44336"><table style="width:100%; border-collapse:collapse;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="font-family:Arial, Helvetica, sans-serif;"><span class="header" style="font-family:Arial, Helvetica, sans-serif;"><img style="display:block" src="http://images.theonlineimages.com/ima/200x125.jpg" alt="" width="100%" /></span></td>
</tr>
</table></td>
</tr>
</table>
<table class="spacer" border="0" cellspacing="0" style="width:100%; border-collapse:collapse;">
<tr>
<td height="20"> </td>
</tr>
</table>
<table class="sideimagesb" border="0" cellpadding="5" cellspacing="0" style="width:100%; border-collapse:collapse;">
<tr>
<td bgcolor="#F44336"><table style="width:100%; border-collapse:collapse;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" bgcolor="#BDBDBD" style="font-family:Arial, Helvetica, sans-serif;"><span class="header" style="font-family:Arial, Helvetica, sans-serif;"><img style="display:block" src="http://images.theonlineimages.com/ima/200x125.jpg" alt="" width="100%" /></span></td>
</tr>
</table></td>
</tr>
</table>
<table class="spacer" border="0" cellspacing="0" style="width:100%; border-collapse:collapse;">
<tr>
<td height="20"> </td>
</tr>
</table>
<table class="sideimagesa" border="0" cellpadding="5" cellspacing="0" style="width:100%; border-collapse:collapse;">
<tr>
<td bgcolor="#F44336"><table style="width:100%; border-collapse:collapse;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" bgcolor="#BDBDBD" style="font-family:Arial, Helvetica, sans-serif;"><span class="header" style="font-family:Arial, Helvetica, sans-serif;"><img style="display:block" src="http://images.theonlineimages.com/ima/200x125.jpg" alt="" width="100%" /></span></td>
</tr>
</table></td>
</tr>
</table>
<table class="spacer" border="0" cellspacing="0" style="width:100%; border-collapse:collapse;">
<tr>
<td height="20"> </td>
</tr>
</table>
<table class="sideimagesb" border="0" cellpadding="5" cellspacing="0" style="width:100%; border-collapse:collapse;">
<tr>
<td bgcolor="#F44336"><table style="width:100%; border-collapse:collapse;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" bgcolor="#BDBDBD" style="font-family:Arial, Helvetica, sans-serif;"><span class="header" style="font-family:Arial, Helvetica, sans-serif;"><img style="display:block" src="http://images.theonlineimages.com/ima/200x125.jpg" alt="" width="100%" /></span></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td style="padding-top:20px; padding-bottom:20px;"><table class="footer" style="width:625px; margin:auto; border-collapse:collapse;" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#212121" align="center">You can put disclaimers, contact info, or any other footer information you might want to include here</td>
</tr>
</table></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</div>
</body>
</html>
Screenshot of the tiny text in Gmail
Вы правы. Я упустил из виду, что ширина была 660 пикселей, знаете ли вы, какие почтовые клиенты не поддерживают EM и ключевые слова? До сих пор у меня никогда не было проблем с ними. – JoeyPhillips
Это не значит, что они не поддерживаются, это значит, что нет согласованности. EM и проценты (а также ключевое слово) основаны на размере шрифта по умолчанию, объявленном каждым почтовым клиентом, что означает, что он не является стандартным, как в Интернете. Я не говорю, что вы не можете добиться успеха с EM и т. Д., Но настоятельно рекомендуется использовать PX. – Gortonington
Большой совет, объявление ширины действительно было проблемой. Я попробовал заставить шаблон использовать только процентную ширину вместо этого и установить максимальную ширину, чтобы она не была слишком большой на рабочем столе, и она сработала. Выглядит уродливо, как черт возьми этот макет, так что мне придется возиться с некоторыми другими идеями макета, например, с одним столбцом. – humulos