Письмо разъехалось на телефоне: что проверить и как починить
Семь симптомов, их причины и порядок исправления
Mailvex · 4 сентября 2026 · 4 мин чтения
На компьютере письмо выглядит правильно, а на телефоне текст мельчает, колонки не складываются, кнопка уезжает за край. Причин семь, и почти все связаны с одним: вёрстка сделана под широкий экран, а узкий получает её же без изменений. Ниже симптомы, причины и порядок исправления.
Сначала посмотрите, что именно сломалось
Прежде чем чинить, определите, что именно сломалось. Открывать письмо на телефоне и смотреть целиком недостаточно — нужно понять, какой элемент ведёт себя не так.
Практический приём: откройте письмо на телефоне и на компьютере рядом. Разница будет видна сразу, и вы поймёте, это про размер, про раскладку или про отступы.
Важно понимать, что часть почтовых клиентов на телефоне вообще не поддерживает медиазапросы. То есть код, который меняет вёрстку на узком экране, там просто не сработает. Поэтому вёрстка должна быть рабочей до всяких изменений, а медиазапрос только улучшать её.
Семь симптомов и их причины
Семь симптомов покрывают почти все случаи. Найдите свой в первом столбце.
| Симптом | Причина | Что сделать |
|---|---|---|
| Текст мельче обычного | фиксированный размер меньше 16 пикселей | поставить от 16, iPhone увеличит всё, что меньше 13, и сломает вёрстку |
| Письмо шире экрана | жёсткая ширина в пикселях | ширина 600 на десктопе, 100 процентов на узком экране |
| Колонки не сложились | вёрстка на блоках без запасного варианта | таблицы плюс медиазапрос, часть клиентов их игнорирует |
| Кнопка не нажимается | высота меньше 44 пикселей | от 44, лучше 48, отступы задать у ссылки |
| Картинки растянуты | нет ограничения по ширине | максимальная ширина 100 процентов, высота авто |
| Отступы разъехались | отступы заданы у блоков, а не у ячеек | перенести на ячейки таблицы |
| Письмо обрезано | вес выше порога | держать до 100 КБ, сервис добавит свой код сверху |
Первые две строки встречаются чаще остальных вместе взятых. Особенно первая — про неё почти не пишут, а последствия заметные.
Ловушка со шрифтом на iPhone
Ловушка со шрифтом заслуживает отдельного разбора, потому что она неочевидна.
iPhone принудительно увеличивает любой шрифт мельче 13 пикселей. Делает он это ради читаемости, и отключить это нельзя.
Проблема в том, что контейнер при этом не меняется. Текст стал крупнее, а место под него осталось прежним — и он перестаёт помещаться. Строка переносится не там, где задумано, блок растёт вниз, соседние элементы сдвигаются.
Отсюда правило: основной текст от 16 пикселей, мелкий вроде подписей под картинками — не меньше 13. Всё, что ниже, приведёт к непредсказуемой вёрстке на части устройств.
Порядок исправления
Чинить симптомы стоит в определённом порядке — некоторые исправления снимают сразу несколько проблем.
- сначала размеры шрифтов: от 16 для текста, не меньше 13 для мелкого
- потом ширина: 600 пикселей на широком экране, 100 процентов на узком
- затем раскладка: таблицы вместо блоков, одна колонка по умолчанию
- после этого кнопки: высота от 44, лучше 48, отступы у ссылки
- в конце отступы: перенести с блоков на ячейки таблиц
Порядок не случаен. Размеры шрифта влияют на высоту блоков, ширина на переносы, раскладка на всё сразу. Если начать с отступов, придётся переделывать после каждой следующей правки.
Как проверять, а не гадать
Проверять письмо в эмуляторе браузера недостаточно. Он показывает, как выглядел бы сайт при такой ширине окна, а не как почтовый клиент отрисует письмо на реальном устройстве.
Минимальная проверка — отправить письмо себе и открыть на телефоне. Не в предпросмотре сервиса рассылок, а в настоящем почтовом приложении, где оно окажется у получателя.
- открыть на телефоне и прокрутить целиком
- нажать по краю каждой кнопки, а не по центру
- посмотреть в тёмной теме: не слился ли текст с фоном
- отключить загрузку картинок и убедиться, что смысл сохранился
- проверить, помещается ли текст в блоки без переносов посреди слов
Второй пункт важнее остальных. Именно нажатие по краю показывает, кликается кнопка целиком или только надпись — а это самая частая причина потерянных переходов на телефоне.
Как это решается в конструкторе
Большинство симптомов из таблицы возникает потому, что вёрстка делается под широкий экран, а мобильный получает её без изменений. Правильный порядок обратный: сначала решается, как письмо выглядит на узком экране, потом добавляется широкая версия.
В конструкторе Mailvex у каждого блока есть отдельные настройки для узкого экрана: свои отступы, размер шрифта, порядок колонок. Компилятор выдаёт таблицы с медиазапросом, поэтому письмо остаётся рабочим даже в клиентах, которые медиазапросы игнорируют. Предпросмотр переключается между десктопом и телефоном прямо в редакторе, а тестовую отправку можно сделать не выходя из него.
Соберите письмо, которое работает на узком экране.
Смотреть шаблоныЧастые вопросы
Почему текст на iPhone крупнее, чем я задавал?
Система принудительно увеличивает любой шрифт мельче 13 пикселей ради читаемости, и отключить это нельзя. Контейнер при этом не меняется, поэтому текст перестаёт помещаться и вёрстка съезжает. Ставьте от 16 для основного текста и не меньше 13 для мелкого.
Достаточно ли проверить письмо в эмуляторе браузера?
Нет. Эмулятор показывает, как выглядел бы сайт при такой ширине окна, а почтовый клиент отрисовывает письмо иначе. Отправьте письмо себе и откройте в настоящем почтовом приложении на телефоне.
Что делать, если колонки не складываются в одну?
Часть мобильных почтовых клиентов не поддерживает медиазапросы, поэтому код, меняющий вёрстку на узком экране, там не срабатывает. Вёрстка должна быть рабочей в одну колонку по умолчанию, а медиазапрос только улучшать её на клиентах, которые его понимают.
