email
Hybrydowe kodowanie e-mail

Android ASP.NET C# Language CSS HTML Java Language JavaScript PHP Python Language Ruby on Rails
Szukaj…


Wprowadzenie

Gdy klient poczty e-mail nie obsługuje media-queries , można zastosować podejście hybrydowe w celu rekonfiguracji układu dla różnych rozmiarów ekranu dla klientów e-mail, niezależnie od obsługi zapytań o media. Wykorzystuje płynne tabele oraz maksymalną i minimalną szerokość w celu narzucenia sztywnych linii bazowych (umożliwiając pewien ruch) i narzuca stałą, szeroką szerokość dla programu Outlook, który i tak jest przykuty do pulpitu. Po ustawieniu linii bazowej na urządzenia mobilne zapytania o media stopniowo ulepszają pocztę e-mail u klientów, którzy ją obsługują.

Pojedyncza kolumna, układ płynu

Podstawowa konfiguracja kodowania hybrydowego to pojedyncza, płynna kolumna. Ponieważ większość klientów e-mail obsługuje max-width , możemy użyć tego, aby ustawić szerokość <table> na 100% (płyn), ale nie przekraczać maksymalnej szerokości (w tym przypadku 660px ). Tak jak w sieci.

Jednak Windows Desktop Microsoft nie obsługuje max-width i renderowałby tę tabelę przy szerokości 100%, więc używamy znaczników warunkowych Microsoft do konfigurowania „ 660px tabel ”, które nadają <table> twardą szerokość 660px . Windows Desktop Microsoft jest przeznaczony tylko dla komputerów stacjonarnych, więc nie musi być płynny w małych rozmiarach. A ponieważ Windows Desktop Microsoft jest jedynym klientem poczty e-mail obsługującym te tagi warunkowe Microsoft, żaden inny klient nie zostanie przypadkowo ograniczony do szerokości pulpitu 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>


Modified text is an extract of the original Stack Overflow Documentation
Licencjonowany na podstawie CC BY-SA 3.0
Nie związany z Stack Overflow