È corretto usare vw (larghezza vista) per la dimensione del carattere nell'email HTML per dispositivi mobili

Question

Sto creando un modello di email HTML. La versione desktop è fatta con tabelle, pochi css in linea, tutte le dimensioni sono definite in valori% o ​​px.

Per la versione mobile lavoro con div e css. Ora mi piacerebbe ridimensionare alcuni testi a seconda della larghezza della finestra. Perché se definisco la dimensione del font di una intestazione per dire 28px, allora un certo testo potrebbe sembrare OK su un dispositivo più ampio, ma su un dispositivo più piccolo il testo diventa troppo grande e si interrompe alla riga successiva.

Ora sto considerando l'impostazione della base font-size come questo: (frammento eseguito in modalità pagina intera e quindi ridimensionare la finestra per vedere l'effetto)

:root { 
 
    font-size: calc(8px + 4vw); 
 
}

<h1> 
 
    Header 1 
 
</h1> 
 
<h2> 
 
    Header 2 
 
</h2> 
 
<p> 
 
    Lorem ipsum dolor sit amet, quo eripuit menandri instructior ad, nostro iracundia nam at. Etiam quaerendum vis no. Percipit accommodare ne eum. Alia molestie democritum vix no, natum habemus ei eum, qui ut adhuc partem luptatum. 
 
</p>

Ti piace questa la le dimensioni dei caratteri successive vengono ridimensionate in base alla larghezza della finestra, l'intestazione diventa più piccola sui dispositivi più piccoli, impedendo la rottura del testo o, per lo meno, rendendo meno probabile. Usando calc() definisco anche un certo minimo, quindi il testo non diventerà troppo piccolo.

Ora la mia domanda è se è OK usare questo per e-mail (mobile), o è mal supportato dai client di posta mobili? Il supporto del browser è abbastanza buono, ma non sono riuscito a trovare alcuna informazione sul supporto del client di posta elettronica mobile.

Answer 1

Ciao puoi sempre controllare il supporto per gli attributi css su http://caniuse.com. Ho trovato questo: http://caniuse.com/#search=vw che mostra iOS 8.4 e Android 4.4 e supporto sopra. Non è fantastico, e immagino che molte persone siano ancora su iOS7 (ok, forse solo io!).

In breve sono d'accordo che probabilmente non dovreste dipendere da questa tecnologia che funziona ovunque.

Answer 2

Px è davvero l'unica dichiarazione di unità coerente per le dimensioni dei caratteri nello sviluppo dell'email HTML tra client e dispositivi. (https://www.campaignmonitor.com/blog/email-marketing/2011/04/should-i-use-em-or-px-when-coding-for-html-email/).

Nella progettazione mobile, il testo più grande di solito è migliore, ma ci sono momenti in cui i titoli o altri elementi devono essere ridotti per adattarsi al design. L'opzione migliore qui è creare l'e-mail con un design "mobile-first" e quindi utilizzare le query multimediali e i condizionali MSO per farlo espandere ai desktop.

Con oltre il 50% di e-mail aperte su un dispositivo mobile (http://www.emailmonday.com/mobile-email-usage-statistics) e Gmail e molte altre applicazioni di e-mail di terze parti che eliminano completamente il tag di stile, è più logico avere il valore predefinito su mobile.

Ci sono opzioni per aiutare il client Web di Gmail a comportarsi meglio. (http://freshinbox.com/blog/interactive-emails-in-gmail-using-css-attribute-selectors/) Anche se la classe e l'id non funzionano, usando lo stile sull'att controllare il layout della versione di posta elettronica di Gmail in misura maggiore.