Gmail на iOS и Gmail на Android-рендеринг по-разному

Question

У меня есть письмо, которое я пишу, используя табличные макеты, которые при отправке на учетную запись электронной почты отображают строки в «мобильной оптимизированной» форме в Gmail для Android , но делает их полными (и, следовательно, с крошечным текстом) в Gmail для iOS.

Любые мысли здесь о том, что может происходить? Я знаю, что это не самый ясный вопрос, и я не могу сузить его до определенного набора html, который вызывает разницу. Googling также не дал очевидных результатов.

Спасибо!

<table width=100% cellspacing="0" cellpadding="0" style="" class=""> 
    <tr width="100%"> 
     <td width="100%" style=" 
     padding: 10px; 
     box-shadow: 0 2px 0 0 #f1f1f1; 
     background-color: #ffffff; 
    " class=""> 


<table cellspacing="0" cellpadding="0" width='100%' style='' align='' class=""> 


<tr style='' class=''> 


<td width='' height='' style=' 
     width: 150px; 
     min-width: 150px; 
     line-height: 0; 
    ' align='' valign='top' class='list-card__header' colspan='1'> 


<table cellspacing="0" cellpadding="0" width='100%' style='' align='' class=""> 


<tr style='' class=''> 


<td width='' height='' style=' 
     width: 150px; 
     max-width: 150px; 
     height: 75px; 
     line-height: 0; 
     overflow: hidden; 
    background-color:#dedede' align='center' valign='middle' class='list-card__image-wrapper' colspan='1'> 

            <img class="list-card__image" src="https://cdn.evbstatic.com/s3-build/perm_001/f8c5fa/django/images/discovery/default_logos/4.png" style=" 
     overflow: hidden; 
     max-width: 150px; 
     height: 75px; 
    " border="0" /> 

</td> 


</tr> 


</table> 


</td> 


<td width='*' height='' style=' 
     padding-left: 15px; 
     min-width: 150px; 
    ' align='left' valign='top' class='list-card__body' colspan='1'> 

         <div class="list-card__date" style=" 
     text-overflow: ellipsis; 
     overflow: hidden; 
     white-space: nowrap; 
     color: #343434; 
     font-size: 12px; 
     line-height: 20px; 
     height: 20px; 
     text-transform: uppercase; 
     letter-spacing: 1px; 
     padding-top: 5px; 
     min-width: 150px; 
     width: 150px; 
    "> 
          Sat, Dec 31 
         </div> 
         <div class="list-card__title" style=" 
     display: -webkit-box; 
     -webkit-line-clamp: 2; 
     -webkit-box-orient: vertical; 
     overflow: hidden; 
     height: 36px; 
     max-height: 36px; 
     color: #333333; 
     font-size: 15px; 
     font-weight: 700; 
     line-height: 18px; 
     letter-spacing: 0; 
     min-width: 150px; 
    "> 
          Hunger Plus, Inc. 
         </div> 
         <div style=" 
     display: -webkit-box; 
     -webkit-line-clamp: 1; 
     -webkit-box-orient: vertical; 
     text-overflow: ellipsis; 
     overflow: hidden; 
     font-size: 12px; 
     line-height: 20px; 
     height: 20px; 
     color: #8c8c8c; 
     min-width: 150px; 
     width: 150px; 
     height: 20px; 
     max-height: 20px; 
    "> 
          Hunger Plus, Inc. 
         </div> 

</td> 


</tr> 


</table> 


     </td> 
    </tr> 

Answer 1

HTML не является графическим форматом, гарантирующим идеальный результат на каждой платформе. Для чего-то подобного PDF намного ближе (или изображения, с полной потерей текстовой информации).

HTML - это «Язык разметки гипертекста», поэтому он был в основном предназначен для передачи текстового контента, с дополнительными отметками, помогающими обрабатывать (отображать/использовать) контент.

CSS сделал его несколько более предсказуемым с точки зрения графического вывода, но все же небезопасно брать что-либо (например, веб-банк, который я использую, выглядит разбитым на моем рабочем столе, так как я использую минимальный размер шрифта, который прерывает бит компоновки их таблиц, смещение строк значений не синхронизировано с метками).

Но это HTML, и вы говорите об электронной почте. Пока вы ориентируетесь только на gmail, по крайней мере, вы можете проверить, как выглядит результат. Но в случае, если вы хотите отправить правильную универсальную электронную почту (не предполагая, что получатель ее читает с помощью приложения Gmail), вам скорее следует отправить действительную версию с открытым текстом (вместе с HTML-кодом). Расширение HTML даже не является частью стандарта, и до сих пор около ~ 3% людей используют почтовые клиенты только для текста (например, я).

В чем проблема, крошечный текст? И ваша электронная почта должна читаться в основном на экранах мобильных телефонов? Затем создайте таблицу с меньшим количеством столбцов, так что она будет достаточно узкой? Или ознакомьтесь с некоторой магией CSS, чтобы создать различные варианты компоновки для устройств, сообщающих о различной ширине экрана.

В любом случае, вы не можете ожидать пиксель идеального рендеринга, так как каждое устройство имеет другой экран, или пользователь может быть запущен почтовым приложение только в окне, или пользователь может применять различные размеры шрифтов и т.д.

Итак, это нормально, что другое устройство/приложение визуализирует ваш HTML по-разному, и это не должно представлять для вас никаких проблем, если ваш HTML разумно спроектирован.

Answer 2

я мог быть недоразумением, но это выглядит как изменение первой строки:

<table width=100% cellspacing="0" cellpadding="0" style="" class=""> 

к этому:

<table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 600px;"> 

решает эту проблему. <table width=100% ...> заставлял макет быть полной шириной. Редактированный код делает электронную почту 100%, но только до 600 пикселей, поэтому электронная почта будет более широкой на больших экранах и уменьшится на более мелкие.