it-swarm-es.tech

Las tablas de 100% de ancho no funcionan en Gmail Android

Estoy tratando de crear un correo electrónico receptivo: en realidad funciona bastante bien en todos los ámbitos, a excepción de algunas piezas pequeñas que no cooperan en Gmail para Android.

Tengo estas rayas negras realmente simples que se encuentran en la parte superior del correo electrónico como elemento decorativo:

<table width="100%" cellpadding="0" cellspacing="0" align="center" valign="top">
    <tr><td width="100%" height="11" bgcolor="#000000"></td></tr>
    <tr><td width="100%" height="2" bgcolor="#FFFFFF"></td></tr>
    <tr><td width="100%" height="1" bgcolor="#000000"></td></tr>
    <tr><td width="100%" height="30" bgcolor="#FFFFFF"></td></tr>
</table>

Sin embargo, no se muestran como nada más que una pequeña franja de blanco y negro que se asemeja a un signo de exclamación ultradelgado en la aplicación Gmail Android.

Del mismo modo, hay un pie de página que no abarca todo el ancho del correo electrónico:

<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#000000">
    <tr>
        <td>

        <table width="650" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#000000">
            <tr>
                <td align="right" class="footer">
                    <img src="images/footer.png" />
                </td>
            </tr>
        </table>

        </td>
    </tr>
</table>

¿Alguna sugerencia sobre cómo hacer que estos abarquen todo el ancho del correo electrónico?

15
nebulousecho

Si no ha encontrado una solución, intente

estilo = "ancho: 100%! importante" como

 <table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#000000" style="width:100%!important">

A Gmail le gusta quitar la mayor parte del CSS, pero si agrega una etiqueta, importante las mantendrá la mayor parte del tiempo.

42
JoePhillips

Entonces recuerde a Gmail que 100% significa 100% agregando min-width: 100% a nuestra <table>.

fuente

11
insulaner

Después de extensas pruebas, la solución de la siguiente manera funcionará para cualquier problema de espacio vertical en todos los clientes de correo electrónico (disponible en Litmus), incl. Aplicación de Gmail en Andriod.

<table width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100% !important;">
    <tr>
        <td bgcolor="#00a0cc" height="25" style="background:#00a0cc;height:25px;line-height:0;font-size:0;">&nbsp;<br /></td>
    </tr>
</table>

El punto clave es aplicar width:100% !important a la tabla, no funcionará al aplicar a td. Esta es también la mejor solución para reemplazar imágenes espaciadoras verticales.

2
Mark

No estoy familiarizado con la creación de clientes/sitios/etc. para cualquier cosa que no esté diseñada para PC, por lo que no estoy seguro de si esto funcionará o no, pero intente hacerlo.

<center>
<h1 style="color:#888888;">Android Client Header</h1>
<p>Demonstration</p>
</center>
<hr color="#000000" style="height:11px;">
<hr color="#FF0000" style="height:2px;">
<hr color="#000000" style="height:1px;">
<hr color="#FF0000" style="height:30px;">

<h3 style="color:#0070ff;">Content 1</h3>
<p color="#808080">E-mail Here</p>
<hr color="#000000">
<center>
<h1 style="color:#db880f;text-size:10px;">Android Client Footer</h1>
<p style="color:#888888;">Demonstration</p>
</center>

A pesar de que pierde la característica del elemento "tabla", este es un ejemplo de ejemplo que se me ocurrió, haciendo mi mejor esfuerzo para combinar sus configuraciones de color y tamaño para las decoraciones de línea.

0
user3799724