email
Codifica e-mail ibrida
Ricerca…
introduzione
Quando un client di posta elettronica non supporta media-queries , è possibile utilizzare un approccio ibrido per riconfigurare il layout per diverse dimensioni dello schermo per i client di posta elettronica, indipendentemente dal supporto delle query multimediali. Usa tabelle fluide e larghezza massima e larghezza minima per imporre linee di base rigide (consentendo alcuni movimenti) e impone una larghezza fissa e ampia per Outlook che viene incatenato al desktop in ogni caso. Una volta impostata una linea di base ottimizzata per i dispositivi mobili, le query multimediali aumentano progressivamente l'e-mail nei client che la supportano.
Colonna singola, layout fluido
L'impostazione di base della codifica ibrida è una singola colonna fluida. Poiché la maggior parte dei client di posta elettronica supporta la max-width , possiamo usarla per impostare la larghezza della <table> su 100% (fluido), ma non su una larghezza massima ( 660px in questo caso). Proprio come sul web.
Tuttavia, Windows Desktop Microsoft non supporta la max-width e renderebbe questa tabella larga al 100%, quindi utilizziamo i tag condizionali Microsoft per impostare " Tabelle Ghost " che forniscono <table> una larghezza hard di 660px . Windows Desktop Microsoft è solo desktop, quindi non deve essere fluido a piccole dimensioni. E poiché Windows Desktop Microsoft è l'unico client di posta elettronica che supporta questi tag condizionali Microsoft, nessun altro client verrà inavvertitamente limitato a una larghezza del desktop di 660px .
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="">
<tr>
<td align="center" height="100%" valign="top" width="100%">
<!--[if mso]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="660">
<tr>
<td align="center" valign="top" width="660">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:660px;">
<tr>
<td align="center" valign="top">
<p>Content Goes Here.</p>
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>