Email reattive sull'app Gmail (Android)

Question

Ho creato un modello di posta elettronica reattivo che funziona con tutti i client Web, tutte le versioni di Outlook, Apple Mail, Thunderbird, iOS, l'app "Mail" di HTC e quasi tutto tranne le note Lotus.

Non funziona per l'app Gmail su Android. Sono sicuro che questo è dovuto al fatto che Gmail rimuove tutti i css nell'intestazione (che contiene la query multimediale) in modo che mostri la versione web standard ma la dimensione della finestra sia mobile, quindi mostra circa 300px metà dell'email. Esiste comunque la possibilità di forzare l'uso della query multimediale? In caso contrario, c'è un modo per cambiare la visualizzazione? Quale sarebbe la migliore opzione di ripiego?

Grazie!

Answer 1

Non esiste alcuna soluzione alternativa che utilizza le query sui supporti poiché non possono essere sottolineati. Sfortunatamente non esiste una soluzione per Gmail riguardante la posta elettronica reattiva (assumendo responsive = media query).

Qui ci sono le alternative:

1. layout fluido - Un layout basato sulla percentuale - di solito una singola email colonna che è al 100%. È possibile aggiungere soluzioni alternative alla larghezza massima per limitare la larghezza sui desktop. Questo è supportato al 100% in tutti i principali client ed è la tecnica migliore per l'email HTML secondo me.
2. Tabelle allineate - questo è più "adattativo" di reattivo. Funziona allo stesso modo delle immersioni fluttuanti. L'attributo HTML align="left" in una tabella funziona in modo più coerente nei principali client di posta elettronica, poiché float ha un supporto limitato.
3. Mantieni la sinistra - Basta progettare la tua e-mail con tutte le cose importanti sul lato sinistro. I dispositivi mostreranno sempre i 300 pixel più a sinistra, quindi una colonna divisa, il testo a sinistra, il layout dell'immagine a destra potrebbero essere appropriati.

È possibile trovare diversi esempi di fluido e galleggiante/allineare here.

Answer 2

È possibile utilizzare la tecnica illustrata qui per forzare l'e-mail a rimanere nella larghezza del desktop nell'app Gmail. Non è una soluzione brillante in quanto tutto sarà piuttosto piccolo e sicuramente non è reattivo (al contrario).

Ma almeno non interromperà il layout.

Il trucco è quello di aggiungere

<div style="display: none; white-space: nowrap; line-height: 0; color: #ffffff;"> 
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
</div> 

alla parte più larga della mail

https://css-tricks.com/override-gmail-mobile-optimized-email/