Le tabelle di larghezza 100% non funzionano in Gmail Android

Sto provando a creare una e-mail reattiva: in realtà sta funzionando molto bene su tutta la linea, ad eccezione di alcuni piccoli pezzi che non cooperano in Gmail per Android.Le tabelle di larghezza 100% non funzionano in Gmail Android

ho questi seriamente semplici strisce nere che si trovano nella parte superiore del messaggio di posta elettronica come 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>

Eppure essi non vengono visualizzati come qualcosa di più di una piccola striscia di bianco e nero che assomiglia un punto esclamativo ultrasottile nell'app Gmail per Android.

Allo stesso modo, v'è un piè di pagina che non è che abbracciano l'intera larghezza della mail:

<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>

Tutti i suggerimenti su come rendere questi coprono l'intera larghezza della posta elettronica?

fonte

2014-09-02 nebulousecho

@Fabio HTML5 non è certamente supportato in client di posta elettronica. Per le e-mail, sfortunatamente, la migliore pratica è usare il codice "gravemente deprecato". http://stackoverflow.com/questions/2935472/html-email-tables-or-divs – rds

+10

Se non hai trovato una soluzione prova style = "width: 100%! important" come

... Sto lavorando a questo problema adesso. A Gmail piace spogliare la maggior parte dei css ma se aggiungi un'etichetta! Importante li manterrà la maggior parte del tempo, sono riuscito a farmi generare la mia email al 100% come 1366px (la mia schermata), tuttavia questo lascia una barra di scorrimento orizzontale. Se ho trovato la soluzione completa, la posterò qui.O se lo hai risolto mi piacerebbe sapere, l'ho visto fare in altre e-mail quindi è possibile. – JoeyPhillips

@JoeyPhillips Questo ha funzionato per me! Ti meriti credito per la risposta corretta. La chiave è in realtà l'aggiunta! Importante per la dichiarazione di larghezza all'interno dell'attributo di stile. Grazie per aver condiviso questo. –

risposta

Se non hai trovato una soluzione provare

style = "width:! 100% importanti" come

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

Gmail ama mettere a nudo la maggior parte della CSS, ma se si aggiunge un'etichetta ! importante li terremo la maggior parte del tempo.

fonte

2014-09-26 20:09:06 JoeyPhillips

Questo dovrebbe essere contrassegnato come la risposta giusta! Era ancora un altro di quei fastidiosi problemi che non riuscivo a rintracciare, ma questo lo risolve! –

Questo mi ha frustrato per la scorsa settimana. Vorrei che Gmail risolvesse questo problema! Grazie! –

Ha smesso di funzionare? Gmail sta ridimensionando automaticamente le mie tabelle sul client Android ma offre l'opzione per disabilitare il ridimensionamento automatico, che risolve il problema ... – MatheusJardimB

Non ho familiarità con la creazione di client/siti/etc per tutto ciò che non è progettato per PC, quindi non sono sicuro che funzionerà o meno, ma provate a farlo.

<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>

Anche se si perde la funzione di elemento di "tavolo", questo è un esempio di esempio ho fornito, facendo del mio meglio per matchup le impostazioni del colore e dimensione per le decorazioni di linea.

fonte

2014-09-24 14:15:12

Dopo numerosi test la soluzione come segue funzionerà per qualsiasi problema di spaziatura verticale tra tutti i client di posta elettronica (disponibile su Litmus), incl. App Gmail su 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>

Punto chiave è quello di applicare width:100% !important al tavolo, non funzionerà su come applicare al td. Questa è anche la soluzione migliore per la sostituzione di immagini spaziali verticali.

fonte

2015-02-17 04:10:39 Mark

Quindi ricorda a Gmail che 100% significa 100% aggiungendo min-larghezza: 100% alla nostra tabella < >.

source

fonte

2015-09-25 09:32:57 insulaner

Questo funziona nel mio caso. È quindi possibile aggiungere min-width: 0 all'interno di una query multimediale per rimuovere questa regola per i client di posta elettronica che supportano le query multimediali. – jarace87

Questo era il pezzo mancante per il mio problema! Nella mia causa, stavo cercando di creare un modello di e-mail a larghezza fissa che fosse sempre 580px, ma Gmail lo avrebbe trasformato in una tabella di larghezza fluida. Aggiunta di 'width: 580px! Important; min-width: 580px! Important;' era ciò di cui aveva bisogno. Saluti! –

Problemi correlati