☰

HTML que se muestra en el panel de vista previa del cliente de correo electrónico de iOS para correo electrónico transaccional

tag-icon • tag-icon email html ios
HTML que se muestra en el panel de vista previa del cliente de correo electrónico de iOS para correo electrónico transaccional

Me he topado con el escenario más desconcertante que puedas imaginar.

Fondo: Para nuestra empresa SAAS, estamos enviando correos electrónicos de bienvenida transaccionales que tienen un hermoso formato y declaran el tipo de documento, etc. utilizando MandrillApp como servicio de correo transaccional.

Problema: El problema que hemos encontrado es que en iOS7, la fuente HTML del correo electrónico se muestra en la sección de vista previa debajo del remitente y la marca de tiempo.

Soluciones intentadas:

  • Se intentó eliminar el tipo de documento por completo, lo que provocó que se mostrara todo el HTML.
  • Se cambió el tipo de documento a HTML 5 desde XHTML 1.0
  • Agregado en un preencabezado. no funcionó

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
    <body>  
        <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
            <tbody>
                <tr>
                    <td align="center" valign="top" style="padding:0 0 20px">
                        <table width="830" cellspacing="0" cellpadding="0">
                            <tbody>
                                <tr>
                                    <td align="center">
                                        <p style="padding:30px 0 1px">
                                            <font face="Helvetica Neue, Arial, Helvetica, sans-serif" size="6" color="#323232" style="line-height:1;font-size:34px;font-weight:300">
                                                Some Text
                                            </font>
                                        </p>
                                    </td>
                                      </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

¡Cualquier ayuda sería muy apreciada!

Respuesta1

¿La vista previa todavía se ve mal si arreglas tu HTML, particularmente en el tr que muestro a continuación?

    <tbody>
        <tr>
            <td align="center">
               <p style="padding:30px 0 1px">
                  <font face="Helvetica Neue, Arial, Helvetica, sans-serif" size="6" color="#323232" style="line-height:1;font-size:34px;font-weight:300">
                                            Some Text
                   </font>
                </p>
             </td>

        -- You're missing </tr> here --

      </tbody>

¿O fue simplemente un error al ingresar su pregunta aquí?

información relacionada