Проблемы с media queries при верстке email писем

101

18 апреля 2021, 11:50

Вопрос о media queries.

Учусь верстке email писем. Необходимо создать адаптивное письмецо, с помощью команды "display:block" преобразовать отображение ячеек таблицы из горизонтального в вертикальное если ширина отображения меньше 618px.

Данный код работает на компуктере. Перенос блоков "td" и смена цвета текста на красный происходит.

Однако на телефонах (Iphone 4 и Iphone 5) в стандартном приложении для писем перенос блоков "td" НЕ происходит, блоки продолжают выстраиваться по горизонтали, а не по вертикале, но цвет текста меняется.

Вот и вопрос, почему телефон отказывается выполнять именно "display:block" ??

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
            @media only screen and (max-width:618px) {
            .td-small{display:block;!important;width:100%!important;box-sizing:border-box!important; color: red;} 
</style>
</head>
<body>
    <table align="center" style="max-width: 600px; min-width: 320px; width: 100%; border-spacing: 0;margin: 0 auto;padding: 0;" cellpadding="0" cellspacing="0">
        <tbody>
            <tr>
                <td>
                    <table align="center" border="1">
                        <tbody>
                            <tr>
                                <td class="td-small" align="center" > 
                                <img width="120px" src="https://abonentconsult.ru/wp-content/uploads/2018/05/Continuity-Keypad-icon.png">
                                <br> 
                                123
                                </td>
                                <td class="td-small" align="center" >
                                <img width="120px" src="https://abonentconsult.ru/wp-content/uploads/2018/05/Continuity-Keypad-icon.png">
                                <br> 
                                123 
                                </td>
                                <td class="td-small" align="center" >
                                <img width="120px" src="https://abonentconsult.ru/wp-content/uploads/2018/05/Continuity-Keypad-icon.png">
                                <br> 
                                123 
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Answer 1

Вёрстка email-писем очень отличается от современной вёрстки сайтов. До сих пор здесь используются таблицы. Рекомендую почитать эти статьи, чтобы понять суть вёрстки Email-писем.

Верстка email рассылок от А до Я для чайников

Гид по верстке адаптивных писем

Как верстать email письма — особенности и примеры кода