[{"data":1,"prerenderedAt":552},["ShallowReactive",2],{"docs-article-\u002Fdocs\u002Fsite-builder\u002Fresponsive-preview":3,"docs-all":298},{"id":4,"title":5,"body":6,"category":286,"categoryLabel":287,"description":288,"extension":289,"meta":290,"navigation":291,"order":292,"path":293,"pro":291,"seo":294,"stem":295,"updated":296,"__hash__":297},"docs\u002Fdocs\u002Fsite-builder\u002Fresponsive-preview.md","Responsive preview (Desktop \u002F Mobile)",{"type":7,"value":8,"toc":273},"minimark",[9,13,22,27,38,52,59,63,66,104,108,134,137,141,152,160,163,167,170,190,201,205,212,223,230,234,237,241,252,256],[10,11,5],"h1",{"id":12},"responsive-preview-desktop-mobile",[14,15,16,17,21],"p",{},"80 % ваших гостей заходят с телефонов. Но редактирование обычно идёт с ноутбука. Значит ",[18,19,20],"strong",{},"проверять мобильный вид — обязательно",". Конструктор предоставляет для этого отдельный режим.",[23,24,26],"h2",{"id":25},"переключатель","Переключатель",[14,28,29,30,33,34,37],{},"В toolbar — иконки ",[18,31,32],{},"Desktop"," \u002F ",[18,35,36],{},"Mobile",":",[39,40,41,47],"ul",{},[42,43,44,46],"li",{},[18,45,32],{}," — preview шириной 1200 px.",[42,48,49,51],{},[18,50,36],{}," — preview шириной 390 px (iPhone 13\u002F14\u002F15).",[14,53,54,55,58],{},"Между ними есть неявный ",[18,56,57],{},"Tablet"," режим — если тянуть за ручку preview, можно получить любую ширину.",[23,60,62],{"id":61},"что-меняется","Что меняется",[14,64,65],{},"На мобильном Misea автоматически адаптирует:",[39,67,68,74,80,86,92,98],{},[42,69,70,73],{},[18,71,72],{},"Навигация"," — горизонтальное меню в шапке превращается в гамбургер.",[42,75,76,79],{},[18,77,78],{},"Сетка блюд"," — сколько в ряд на десктопе, столько же \u002F 2 на мобильном.",[42,81,82,85],{},[18,83,84],{},"Отступы"," — padding L (64 px) становится 32 px, XL (96 px) — 48 px.",[42,87,88,91],{},[18,89,90],{},"Шрифты"," — базовый размер остаётся, но auto-scaling заголовков H1 корректируется.",[42,93,94,97],{},[18,95,96],{},"Hero-блок"," — высота адаптируется, картинка центрируется.",[42,99,100,103],{},[18,101,102],{},"Галерея"," — сетка 4-колонок → 2 колонки.",[23,105,107],{"id":106},"частые-ошибки-которые-видно-только-в-mobile","Частые ошибки, которые видно только в Mobile",[39,109,110,116,122,128],{},[42,111,112,115],{},[18,113,114],{},"Текст в Hero не помещается"," — заголовок в 7 слов на ноутбуке выглядит нормально, на мобиле — на 3 строки.",[42,117,118,121],{},[18,119,120],{},"Кнопка CTA «вылазит» за экран"," — длинный текст («Забронировать столик»), нужно короче («Бронь»).",[42,123,124,127],{},[18,125,126],{},"Картинка обрезается не там"," — аспект 16:9 на мобильном становится 9:16, важные элементы уходят за край.",[42,129,130,133],{},[18,131,132],{},"Цены и название блюда не влезают в карточку"," — крупный шрифт + длинное название = ломанная вёрстка.",[14,135,136],{},"Проверяйте в Mobile каждую страницу после изменений.",[23,138,140],{"id":139},"технически-iframe-postmessage","Технически — iframe + postMessage",[14,142,143,144,148,149,37],{},"Preview — это реальный iframe, загружающий вашу публичную витрину с флагом ",[145,146,147],"code",{},"?preview=1&draft=1",". Конструктор общается с ним через ",[145,150,151],{},"postMessage",[39,153,154,157],{},[42,155,156],{},"«Клик по блоку в iframe» → конструктор выделяет его.",[42,158,159],{},"«Изменилось поле в редакторе» → отправляется патч в iframe → iframe обновляется без перезагрузки.",[14,161,162],{},"Результат: гостевой рендер и редакторский — ровно одно и то же, никаких отличий «работает тут, а там нет».",[23,164,166],{"id":165},"реальные-устройства","Реальные устройства",[14,168,169],{},"Preview 390 px даёт представление о iPhone 13–15. Но реальный мобильный может отличаться:",[39,171,172,178,184],{},[42,173,174,177],{},[18,175,176],{},"iPhone SE (2020)"," — 375 px.",[42,179,180,183],{},[18,181,182],{},"Android small"," — 360 px.",[42,185,186,189],{},[18,187,188],{},"iPhone Plus \u002F iPad mini"," — 414 px \u002F 768 px.",[14,191,192,193,196,197,200],{},"Самый надёжный способ — ",[18,194,195],{},"открыть реальный сайт на телефоне",". Поддомен ",[145,198,199],{},"\u003Ctenant>.misea.site?preview=1&draft=1"," доступен с любого устройства под вашим логином.",[23,202,204],{"id":203},"device-mode-в-devtools","Device Mode в DevTools",[14,206,207,208,211],{},"В Chrome \u002F Safari DevTools есть ",[18,209,210],{},"Device Toolbar"," (иконка мобильника сверху). В нём можно:",[39,213,214,217,220],{},[42,215,216],{},"Выбрать из preset-устройств.",[42,218,219],{},"Задать произвольную ширину.",[42,221,222],{},"Симулировать touch-события.",[14,224,225,226,229],{},"Пользуйтесь им ",[18,227,228],{},"дополнительно"," к preview в конструкторе для нестандартных разрешений.",[23,231,233],{"id":232},"landscape","Landscape",[14,235,236],{},"Горизонтальный режим мобильного (landscape) — отдельная история. Обычно у ресторанов гости не пользуются, но если хотите проверить — это та же ширина 660–800 px, что даст preview между Mobile (390) и Desktop (1200).",[23,238,240],{"id":239},"ползунок-preview","Ползунок preview",[14,242,243,244,247,248,251],{},"Помимо Desktop \u002F Mobile, можете просто ",[18,245,246],{},"тянуть правую границу preview"," — ширина меняется непрерывно. Так находят «breakpoint», на котором вёрстка ломается. Если нашли — в редакторе блока можно задать ",[18,249,250],{},"custom breakpoint override",".",[23,253,255],{"id":254},"следующие-шаги","Следующие шаги",[39,257,258,266],{},[42,259,260,265],{},[261,262,264],"a",{"href":263},"\u002Fdocs\u002Fsite-builder\u002Flayout-variant-padding","Подложки блоков и отступы"," — про adaptive padding.",[42,267,268,272],{},[261,269,271],{"href":270},"\u002Fdocs\u002Fsite-builder\u002Fhero-block","Блок Hero"," — высота на mobile.",{"title":274,"searchDepth":275,"depth":275,"links":276},"",2,[277,278,279,280,281,282,283,284,285],{"id":25,"depth":275,"text":26},{"id":61,"depth":275,"text":62},{"id":106,"depth":275,"text":107},{"id":139,"depth":275,"text":140},{"id":165,"depth":275,"text":166},{"id":203,"depth":275,"text":204},{"id":232,"depth":275,"text":233},{"id":239,"depth":275,"text":240},{"id":254,"depth":275,"text":255},"site-builder",null,"Live-iframe с postMessage, переключение 1200px ↔ 390px, почему важно проверять оба режима.","md",{},true,19,"\u002Fdocs\u002Fsite-builder\u002Fresponsive-preview",{"title":5,"description":288},"docs\u002Fsite-builder\u002Fresponsive-preview","2026-04-23","-DLA7eEFL8B2PuXL7URQ8jx71gkcXFif-WRC_S0x1H4",[299,304,310,316,321,326,331,336,341,346,351,355,359,364,368,372,376,381,386,390,394,398,402,406,410,414,419,423,427,431,435,439,443,448,452,456,459,464,469,474,479,484,489,494,497,502,507,512,517,518,523,528,531,534,537,540,543,546,549],{"path":300,"title":301,"description":302,"category":286,"order":303,"pro":291},"\u002Fdocs\u002Fsite-builder\u002Ffrom-scratch","С нуля: витрина от и до","Полный сквозной маршрут по конструктору — от пустого шаблона до опубликованной витрины с каталогом, фирменным стилем, мобильной версией, QR-кодом и собственным доменом.",0,{"path":305,"title":306,"description":307,"category":308,"order":309,"pro":291},"\u002Fdocs\u002Fanalytics\u002Frevenue-average-check","Выручка и средний чек","\u002Freports — метрики выручки и ср. чека, графики по времени, сравнение периодов, Free vs Pro.","analytics",1,{"path":311,"title":312,"description":313,"category":314,"order":309,"pro":315},"\u002Fdocs\u002Fcatalog\u002Fadd-dish","Как добавить блюдо в меню","Пошагово — фото, цена, категория, модификаторы и опции. Что важно, а что можно пропустить.","catalog",false,{"path":317,"title":318,"description":319,"category":320,"order":309,"pro":291},"\u002Fdocs\u002Fdelivery\u002Fenable-delivery","Включить доставку и зоны","Настройка доставки, выбор между списком зон и полигонами на карте, минимальная сумма.","delivery",{"path":322,"title":323,"description":324,"category":325,"order":309,"pro":315},"\u002Fdocs\u002Ffaq\u002Ftroubleshooting","Чеклист — частые проблемы и как их решить","Не приходят заказы, не открывается QR-меню, гость не видит блюдо — 10 типичных ситуаций с решениями.","faq",{"path":327,"title":328,"description":329,"category":330,"order":309,"pro":315},"\u002Fdocs\u002Fgetting-started\u002Ffirst-login","Первый вход и создание заведения","Как зарегистрироваться в admin.misea.ru, добавить юрлицо и создать первую локацию за 5 минут.","getting-started",{"path":332,"title":333,"description":334,"category":335,"order":309,"pro":291},"\u002Fdocs\u002Floyalty\u002Fbonuses-cashback","Бонусы и кешбэк","\u002Floyalty — настройка начисления бонусов, правила списания, процент, лимиты.","loyalty",{"path":337,"title":338,"description":339,"category":340,"order":309,"pro":315},"\u002Fdocs\u002Forders\u002Forders-feed","Как читать ленту заказов","Статусы, фильтры, звуковые уведомления, чтобы ничего не пропустить.","orders",{"path":342,"title":343,"description":344,"category":345,"order":309,"pro":315},"\u002Fdocs\u002Fqr-tables\u002Ftables-and-locations","Столы и локации","Разница между локацией и столом, как добавить новую точку или новый QR-стол, что меняется при нескольких филиалах.","qr-tables",{"path":347,"title":348,"description":349,"category":350,"order":275,"pro":315},"\u002Fdocs\u002Fbilling\u002Fhow-to-pay-pro","Как оплатить Pro","Шаги оплаты через YooKassa, промокоды (−10%\u002F−20%), ежемесячная vs годовая подписка, чек.","billing",{"path":352,"title":353,"description":354,"category":314,"order":275,"pro":315},"\u002Fdocs\u002Fcatalog\u002Fcategories","Категории и подкатегории меню","Как сгруппировать блюда, задать порядок, скрыть категорию или сделать её пустой-заглушкой.",{"path":356,"title":357,"description":358,"category":320,"order":275,"pro":291},"\u002Fdocs\u002Fdelivery\u002Fpolygon-zones","Полигональные зоны на Яндекс.Картах","Рисование зон доставки в виде многоугольников, JS API ключ, автоопределение зоны по адресу гостя.",{"path":360,"title":361,"description":362,"category":363,"order":275,"pro":315},"\u002Fdocs\u002Fintegrations\u002Fiiko-setup","iiko — подключение шаг-за-шагом","Получение credentials iikoCloud, ввод в Misea, первая синхронизация, выбор терминала.","integrations",{"path":365,"title":366,"description":367,"category":335,"order":275,"pro":291},"\u002Fdocs\u002Floyalty\u002Fcustomer-card","Карточка клиента","\u002Fcustomers — история заказов, средний чек, избранные блюда, персональные заметки.",{"path":369,"title":370,"description":371,"category":340,"order":275,"pro":315},"\u002Fdocs\u002Forders\u002Fcancel-refund","Отмена и возврат заказа","Когда отменять, а когда делать возврат в YooKassa. Полный vs частичный возврат, шаги, типовые кейсы.",{"path":373,"title":374,"description":375,"category":345,"order":275,"pro":315},"\u002Fdocs\u002Fqr-tables\u002Fqr-codes","Как сгенерировать и распечатать QR-коды","Где взять QR-код для стола, какой размер распечатать, куда клеить и что увидит гость после сканирования.",{"path":377,"title":378,"description":379,"category":380,"order":275,"pro":315},"\u002Fdocs\u002Fstaff-schedule\u002Fshift-schedule","График смен","\u002Fschedule — добавление, перенос, замена смен, календарный вид, шаблоны.","staff-schedule",{"path":382,"title":383,"description":384,"category":350,"order":385,"pro":315},"\u002Fdocs\u002Fbilling\u002Fpro-expiration","Что происходит после окончания оплаты Pro","Grace-period 3 дня, что отключается сразу, что сохраняется навсегда, как восстановить Pro.",3,{"path":387,"title":388,"description":389,"category":314,"order":385,"pro":315},"\u002Fdocs\u002Fcatalog\u002Fmodifiers","Модификаторы — размеры, молоко, добавки","Как настроить варианты блюда с доплатой (S\u002FM\u002FL, растительное молоко, двойная порция) через шаблоны модификаторов.",{"path":391,"title":392,"description":393,"category":320,"order":385,"pro":291},"\u002Fdocs\u002Fdelivery\u002Fcourier-module","Курьерский модуль","Назначение заказов курьеру, статусы, Telegram-бот курьера, маршрутизация.",{"path":395,"title":396,"description":397,"category":330,"order":385,"pro":315},"\u002Fdocs\u002Fgetting-started\u002Fadmin-overview","Обзор админ-панели за 3 минуты","Карта всех разделов админки Misea — что где лежит, с чего начинать, куда смотреть ежедневно.",{"path":399,"title":400,"description":401,"category":363,"order":385,"pro":315},"\u002Fdocs\u002Fintegrations\u002Fiiko-troubleshooting","iiko — типичные ошибки","401\u002F403, конфликты SKU, несинхронизованные позиции, дубли модификаторов, задержка остатков.",{"path":403,"title":404,"description":405,"category":340,"order":385,"pro":315},"\u002Fdocs\u002Forders\u002Ftelegram-notifications","Уведомления о заказах в Telegram","Как подключить бота к чату персонала, кому приходят уведомления, что настраивается.",{"path":407,"title":408,"description":409,"category":286,"order":385,"pro":291},"\u002Fdocs\u002Fsite-builder\u002Fdraft-vs-published","Черновик vs публикация","Что сохраняется локально, что на сервере, что видят гости. Как работает автосохранение и кнопка «Опубликовать».",{"path":411,"title":412,"description":413,"category":380,"order":385,"pro":315},"\u002Fdocs\u002Fstaff-schedule\u002Ftimesheet-fot","Табель и ФОТ","\u002Ftimesheet — автоматический учёт часов, надбавки, закрытие периода, расчёт зарплаты.",{"path":415,"title":416,"description":417,"category":350,"order":418,"pro":315},"\u002Fdocs\u002Fbilling\u002Frefunds-plan-change","Возврат средств и смена тарифа","Политика возвратов, как перейти с месяца на год (или наоборот), когда возврат невозможен.",4,{"path":420,"title":421,"description":422,"category":314,"order":418,"pro":315},"\u002Fdocs\u002Fcatalog\u002Foptions","Опции блюда — острота, прожарка, без чего","Когда нужна опция, а когда модификатор. Как настроить варианты без доплаты.",{"path":424,"title":425,"description":426,"category":320,"order":418,"pro":291},"\u002Fdocs\u002Fdelivery\u002Fhours-minimums","Часы приёма заказов и минимальная сумма","Настройка времени приёма доставки, минимального чека зоны и локации, слот-расписание.",{"path":428,"title":429,"description":430,"category":330,"order":418,"pro":315},"\u002Fdocs\u002Fgetting-started\u002Finvite-colleague","Как пригласить коллегу в админку","Роли admin, manager, waiter, kitchen, courier — что каждый видит и может, как добавить нового сотрудника.",{"path":432,"title":433,"description":434,"category":363,"order":418,"pro":315},"\u002Fdocs\u002Fintegrations\u002Fyandex-maps-api-key","Яндекс.Карты — где взять JS API ключ","Регистрация на developer.tech.yandex.ru, получение ключа, привязка к домену, вставка в Misea.",{"path":436,"title":437,"description":438,"category":286,"order":418,"pro":291},"\u002Fdocs\u002Fsite-builder\u002Fhistory-undo","История изменений (Undo\u002FRedo)","12 снапшотов на страницу, Ctrl+Z и Ctrl+Shift+Z. Как откатить удалённый блок или неудачное редактирование.",{"path":440,"title":441,"description":442,"category":380,"order":418,"pro":291},"\u002Fdocs\u002Fstaff-schedule\u002Fhours-report","Отчёт по часам и ФОТ","\u002Freports\u002Fhours — план vs факт, переработки, стоимость часа, сравнение периодов.",{"path":444,"title":445,"description":446,"category":314,"order":447,"pro":315},"\u002Fdocs\u002Fcatalog\u002Fbulk-import","Массовый импорт меню из Excel","Формат файла, обязательные и опциональные поля, типичные ошибки при импорте 50+ позиций.",5,{"path":449,"title":450,"description":451,"category":330,"order":447,"pro":315},"\u002Fdocs\u002Fgetting-started\u002Fbrand-setup","Бренд — логотип, цвета, контакты","Где настроить название заведения, логотип, контактные данные и первичные цвета, которые подтянутся в QR-меню и на сайт.",{"path":453,"title":454,"description":455,"category":363,"order":447,"pro":315},"\u002Fdocs\u002Fintegrations\u002Ftelegram-bot-setup","Telegram — токен бота и привязка чата","BotFather, создание бота, токен, привязка персонала, уведомления о заказах.",{"path":270,"title":457,"description":458,"category":286,"order":447,"pro":291},"Блок Hero — баннер первого экрана","Заголовок, подзаголовок, фон-картинка, CTA-кнопка. Как сделать сильный первый экран, куда вести кнопку.",{"path":460,"title":461,"description":462,"category":286,"order":463,"pro":291},"\u002Fdocs\u002Fsite-builder\u002Fmenu-block","Блок Меню (каталог товаров)","Макеты сетка\u002Fсписок\u002Fкарточки, карточек в ряд, slider категорий, что прятать-показывать. Главный блок любой витрины.",6,{"path":465,"title":466,"description":467,"category":286,"order":468,"pro":291},"\u002Fdocs\u002Fsite-builder\u002Ftext-image-gallery","Блоки Текст, Изображение, Галерея","Markdown-редактор с жирным\u002Fкурсивом\u002Fпереносами, спецварианты (часы работы, скидки), галерея-список.",7,{"path":470,"title":471,"description":472,"category":286,"order":473,"pro":291},"\u002Fdocs\u002Fsite-builder\u002Fcontacts-block","Блок Контакты","Телефон, адрес, карта, соцсети. Как переопределить данные глобальных настроек для конкретной страницы или локации.",8,{"path":475,"title":476,"description":477,"category":286,"order":478,"pro":291},"\u002Fdocs\u002Fsite-builder\u002Fmap-block","Блок Карта","Автодополнение адреса через Яндекс-Nominatim, встройка карты, метки, масштаб.",9,{"path":480,"title":481,"description":482,"category":286,"order":483,"pro":291},"\u002Fdocs\u002Fsite-builder\u002Fservice-blocks","Карточка товара, Кнопка заказа и служебные блоки","Product Card, Order Button, Categories, Cart, Checkout, Search — когда и зачем ставить.",10,{"path":485,"title":486,"description":487,"category":286,"order":488,"pro":291},"\u002Fdocs\u002Fsite-builder\u002Ffonts-buttons","Шрифты и стиль кнопок","10 шрифтовых семейств, размер 12–24 px, скруглённые vs прямые кнопки, тени и rpadding.",12,{"path":490,"title":491,"description":492,"category":286,"order":493,"pro":291},"\u002Fdocs\u002Fsite-builder\u002Fanimated-backgrounds","Анимированные фоны (Pro)","60+ эффектов — кастомные, Vanta-ported, ReactBits-ported. Переопределение цветов, reduce motion, производительность.",13,{"path":263,"title":264,"description":495,"category":286,"order":496,"pro":291},"layout_variant — section \u002F block \u002F empty. Как сделать блок на всю ширину или в виде карточки. Padding, border-radius, max-width.",14,{"path":498,"title":499,"description":500,"category":286,"order":501,"pro":291},"\u002Fdocs\u002Fsite-builder\u002Fseo-meta","SEO — глобальные и страничные мета-теги","Site-SEO vs Page-SEO. Title, description, keywords. OG-превью для соцсетей. Рекомендуемая длина.",15,{"path":503,"title":504,"description":505,"category":286,"order":506,"pro":291},"\u002Fdocs\u002Fsite-builder\u002Flogo-favicon-nav","Логотип, фавикон, название сайта и навигация","Загрузка логотипа (до 10 МБ), фавикон, site_name, nav_links (catalog \u002F page \u002F category \u002F url).",16,{"path":508,"title":509,"description":510,"category":286,"order":511,"pro":291},"\u002Fdocs\u002Fsite-builder\u002Fmedia-library","Медиа-библиотека","Папки и файлы (JPG \u002F PNG \u002F WebP \u002F GIF \u002F SVG до 10 МБ), загрузка, вставка в любой блок, public URL.",17,{"path":513,"title":514,"description":515,"category":286,"order":516,"pro":291},"\u002Fdocs\u002Fsite-builder\u002Fmulti-location","Конструктор для сети ресторанов (per-location)","Глобальные vs per-location настройки, переключатель в toolbar, подтверждение при несохранённых изменениях.",18,{"path":293,"title":5,"description":288,"category":286,"order":292,"pro":291},{"path":519,"title":520,"description":521,"category":286,"order":522,"pro":291},"\u002Fdocs\u002Fsite-builder\u002Fcustom-domain","Собственный домен и поддомен","Настройка custom domain, subdomain fallback, TLS-сертификат. DNS-записи, проверка.",20,{"path":524,"title":525,"description":526,"category":287,"order":527,"pro":315},"\u002Fdocs\u002Fbilling\u002Ffree-vs-pro","Free vs Pro — что входит в каждый тариф","[object Object]",100,{"path":529,"title":530,"description":526,"category":287,"order":527,"pro":315},"\u002Fdocs\u002Fgetting-started\u002Ftrial-period","Что такое trial и что будет через 7 дней",{"path":532,"title":533,"description":526,"category":287,"order":527,"pro":315},"\u002Fdocs\u002Fintegrations\u002Fiiko-overview","iiko — зачем нужна синхронизация",{"path":535,"title":536,"description":526,"category":287,"order":527,"pro":315},"\u002Fdocs\u002Fqr-tables\u002Fguest-experience","Что видит гость после сканирования QR",{"path":538,"title":539,"description":526,"category":287,"order":527,"pro":315},"\u002Fdocs\u002Fsite-builder\u002Fcolor-palette","Цветовая палитра — 7 слотов, primary и secondary",{"path":541,"title":542,"description":526,"category":287,"order":527,"pro":315},"\u002Fdocs\u002Fsite-builder\u002Finterface","Интерфейс конструктора — 3 панели и toolbar",{"path":544,"title":545,"description":526,"category":287,"order":527,"pro":315},"\u002Fdocs\u002Fsite-builder\u002Fintroduction","Что такое конструктор витрины и зачем он нужен",{"path":547,"title":548,"description":526,"category":287,"order":527,"pro":315},"\u002Fdocs\u002Fstaff-schedule\u002Fpositions-departments","Должности и отделы",{"path":550,"title":551,"description":526,"category":287,"order":527,"pro":315},"\u002Fdocs\u002Ftelegram-bot\u002Fwaiter-bot","Официант через Telegram-бот",1777025875158]