Кодирование HTML-почты с помощью Google Inbox (автоматическое изменение размера)

Попытка создать новостную рассылку электронной почты, которая правильно отображается в мобильных приложениях, но функция автоматического изменения размера в Google Inbox нарушает макет.

Я пытался с помощью min-width встроить каждый элемент (трюк, который работает с приложением Gmail), но, к сожалению, он не имел никакого эффекта в Inbox. Кроме того, в отличие от приложения Gmail, в сообщении нет возможности отключить автоматическое изменение размера.

Какие-либо предложения?

Источник

3 ответа

Решение

Я столкнулся с тем же. Оказывается, если вы используете !important Декларация, это работает. Например:

<div style="width: 100% !important; min-width: 100% !important;"></div>

Это сработало для меня в приложении Gmail и приложении Inbox.

Источник

Заметили то же самое. То, что работало для меня на некоторых шаблонах электронной почты, - это удаление минимальной ширины и добавление встроенного стиля поля:0 auto; для каждой таблицы это будет по крайней мере выравнивать содержимое по центру. Пожалуйста, посмотрите пример ниже:

                    <table ${cell_reset} style="${table_reset} width: 300px; margin:0 auto;" width="300" class="container" align="left">
                      <tr>
                        <td style="width:300px;">

                        </td>
                      </tr>
                    </table>

                    <table ${cell_reset} style="${table_reset} width: 300px; margin:0 auto;" width="300" class="container" align="right">
                      <tr>
                        <td style="width:300px;">

                        </td>
                      </tr>
                    </table>
Источник

Похоже, вы собираетесь адаптивный веб-дизайн.

Я бы начал с ширины основного контейнера:100% и вашего окна просмотра, установленного в заголовке:

<meta name="viewport" content="user-scalable=yes,width=device-width,initial-scale=1,maximum-scale=1">

Затем выровняйте остальные элементы div или контейнеры как блочные или встроенные блоки с% widths, если только вы не хотите использовать ширину в пикселях для div.

Источник
Другие вопросы по тегам