Misea
Pro

Responsive preview (Desktop / Mobile)

Live-iframe с postMessage, переключение 1200px ↔ 390px, почему важно проверять оба режима.

Responsive preview (Desktop / Mobile)

80 % ваших гостей заходят с телефонов. Но редактирование обычно идёт с ноутбука. Значит проверять мобильный вид — обязательно. Конструктор предоставляет для этого отдельный режим.

Переключатель

В toolbar — иконки Desktop / Mobile:

  • Desktop — preview шириной 1200 px.
  • Mobile — preview шириной 390 px (iPhone 13/14/15).

Между ними есть неявный Tablet режим — если тянуть за ручку preview, можно получить любую ширину.

Что меняется

На мобильном Misea автоматически адаптирует:

  • Навигация — горизонтальное меню в шапке превращается в гамбургер.
  • Сетка блюд — сколько в ряд на десктопе, столько же / 2 на мобильном.
  • Отступы — padding L (64 px) становится 32 px, XL (96 px) — 48 px.
  • Шрифты — базовый размер остаётся, но auto-scaling заголовков H1 корректируется.
  • Hero-блок — высота адаптируется, картинка центрируется.
  • Галерея — сетка 4-колонок → 2 колонки.

Частые ошибки, которые видно только в Mobile

  • Текст в Hero не помещается — заголовок в 7 слов на ноутбуке выглядит нормально, на мобиле — на 3 строки.
  • Кнопка CTA «вылазит» за экран — длинный текст («Забронировать столик»), нужно короче («Бронь»).
  • Картинка обрезается не там — аспект 16:9 на мобильном становится 9:16, важные элементы уходят за край.
  • Цены и название блюда не влезают в карточку — крупный шрифт + длинное название = ломанная вёрстка.

Проверяйте в Mobile каждую страницу после изменений.

Технически — iframe + postMessage

Preview — это реальный iframe, загружающий вашу публичную витрину с флагом ?preview=1&draft=1. Конструктор общается с ним через postMessage:

  • «Клик по блоку в iframe» → конструктор выделяет его.
  • «Изменилось поле в редакторе» → отправляется патч в iframe → iframe обновляется без перезагрузки.

Результат: гостевой рендер и редакторский — ровно одно и то же, никаких отличий «работает тут, а там нет».

Реальные устройства

Preview 390 px даёт представление о iPhone 13–15. Но реальный мобильный может отличаться:

  • iPhone SE (2020) — 375 px.
  • Android small — 360 px.
  • iPhone Plus / iPad mini — 414 px / 768 px.

Самый надёжный способ — открыть реальный сайт на телефоне. Поддомен <tenant>.misea.site?preview=1&draft=1 доступен с любого устройства под вашим логином.

Device Mode в DevTools

В Chrome / Safari DevTools есть Device Toolbar (иконка мобильника сверху). В нём можно:

  • Выбрать из preset-устройств.
  • Задать произвольную ширину.
  • Симулировать touch-события.

Пользуйтесь им дополнительно к preview в конструкторе для нестандартных разрешений.

Landscape

Горизонтальный режим мобильного (landscape) — отдельная история. Обычно у ресторанов гости не пользуются, но если хотите проверить — это та же ширина 660–800 px, что даст preview между Mobile (390) и Desktop (1200).

Ползунок preview

Помимо Desktop / Mobile, можете просто тянуть правую границу preview — ширина меняется непрерывно. Так находят «breakpoint», на котором вёрстка ломается. Если нашли — в редакторе блока можно задать custom breakpoint override.

Следующие шаги