[{"data":1,"prerenderedAt":477},["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,306,311,316,321,326,331,335,339,343,348,352,356,360,364,369,373,377,381,386,390,393,398,403,408,413,418,423,428,431,436,441,446,451,452,457,462,465,468,471,474],{"path":300,"title":301,"description":302,"category":303,"order":304,"pro":305},"\u002Fdocs\u002Fcatalog\u002Fadd-dish","Как добавить блюдо в меню","Пошагово — фото, цена, категория, модификаторы и опции. Что важно, а что можно пропустить.","catalog",1,false,{"path":307,"title":308,"description":309,"category":310,"order":304,"pro":305},"\u002Fdocs\u002Ffaq\u002Ftroubleshooting","Чеклист — частые проблемы и как их решить","Не приходят заказы, не открывается QR-меню, гость не видит блюдо — 10 типичных ситуаций с решениями.","faq",{"path":312,"title":313,"description":314,"category":315,"order":304,"pro":305},"\u002Fdocs\u002Fgetting-started\u002Ffirst-login","Первый вход и создание заведения","Как зарегистрироваться в admin.misea.ru, добавить юрлицо и создать первую локацию за 5 минут.","getting-started",{"path":317,"title":318,"description":319,"category":320,"order":304,"pro":305},"\u002Fdocs\u002Forders\u002Forders-feed","Как читать ленту заказов","Статусы, фильтры, звуковые уведомления, чтобы ничего не пропустить.","orders",{"path":322,"title":323,"description":324,"category":325,"order":304,"pro":305},"\u002Fdocs\u002Fqr-tables\u002Ftables-and-locations","Столы и локации","Разница между локацией и столом, как добавить новую точку или новый QR-стол, что меняется при нескольких филиалах.","qr-tables",{"path":327,"title":328,"description":329,"category":330,"order":275,"pro":305},"\u002Fdocs\u002Fbilling\u002Fhow-to-pay-pro","Как оплатить Pro","Шаги оплаты через YooKassa, промокоды (−10%\u002F−20%), ежемесячная vs годовая подписка, чек.","billing",{"path":332,"title":333,"description":334,"category":303,"order":275,"pro":305},"\u002Fdocs\u002Fcatalog\u002Fcategories","Категории и подкатегории меню","Как сгруппировать блюда, задать порядок, скрыть категорию или сделать её пустой-заглушкой.",{"path":336,"title":337,"description":338,"category":320,"order":275,"pro":305},"\u002Fdocs\u002Forders\u002Fcancel-refund","Отмена и возврат заказа","Когда отменять, а когда делать возврат в YooKassa. Полный vs частичный возврат, шаги, типовые кейсы.",{"path":340,"title":341,"description":342,"category":325,"order":275,"pro":305},"\u002Fdocs\u002Fqr-tables\u002Fqr-codes","Как сгенерировать и распечатать QR-коды","Где взять QR-код для стола, какой размер распечатать, куда клеить и что увидит гость после сканирования.",{"path":344,"title":345,"description":346,"category":330,"order":347,"pro":305},"\u002Fdocs\u002Fbilling\u002Fpro-expiration","Что происходит после окончания оплаты Pro","Grace-period 3 дня, что отключается сразу, что сохраняется навсегда, как восстановить Pro.",3,{"path":349,"title":350,"description":351,"category":303,"order":347,"pro":305},"\u002Fdocs\u002Fcatalog\u002Fmodifiers","Модификаторы — размеры, молоко, добавки","Как настроить варианты блюда с доплатой (S\u002FM\u002FL, растительное молоко, двойная порция) через шаблоны модификаторов.",{"path":353,"title":354,"description":355,"category":315,"order":347,"pro":305},"\u002Fdocs\u002Fgetting-started\u002Fadmin-overview","Обзор админ-панели за 3 минуты","Карта всех разделов админки Misea — что где лежит, с чего начинать, куда смотреть ежедневно.",{"path":357,"title":358,"description":359,"category":320,"order":347,"pro":305},"\u002Fdocs\u002Forders\u002Ftelegram-notifications","Уведомления о заказах в Telegram","Как подключить бота к чату персонала, кому приходят уведомления, что настраивается.",{"path":361,"title":362,"description":363,"category":286,"order":347,"pro":291},"\u002Fdocs\u002Fsite-builder\u002Fdraft-vs-published","Черновик vs публикация","Что сохраняется локально, что на сервере, что видят гости. Как работает автосохранение и кнопка «Опубликовать».",{"path":365,"title":366,"description":367,"category":330,"order":368,"pro":305},"\u002Fdocs\u002Fbilling\u002Frefunds-plan-change","Возврат средств и смена тарифа","Политика возвратов, как перейти с месяца на год (или наоборот), когда возврат невозможен.",4,{"path":370,"title":371,"description":372,"category":303,"order":368,"pro":305},"\u002Fdocs\u002Fcatalog\u002Foptions","Опции блюда — острота, прожарка, без чего","Когда нужна опция, а когда модификатор. Как настроить варианты без доплаты.",{"path":374,"title":375,"description":376,"category":315,"order":368,"pro":305},"\u002Fdocs\u002Fgetting-started\u002Finvite-colleague","Как пригласить коллегу в админку","Роли admin, manager, waiter, kitchen, courier — что каждый видит и может, как добавить нового сотрудника.",{"path":378,"title":379,"description":380,"category":286,"order":368,"pro":291},"\u002Fdocs\u002Fsite-builder\u002Fhistory-undo","История изменений (Undo\u002FRedo)","12 снапшотов на страницу, Ctrl+Z и Ctrl+Shift+Z. Как откатить удалённый блок или неудачное редактирование.",{"path":382,"title":383,"description":384,"category":303,"order":385,"pro":305},"\u002Fdocs\u002Fcatalog\u002Fbulk-import","Массовый импорт меню из Excel","Формат файла, обязательные и опциональные поля, типичные ошибки при импорте 50+ позиций.",5,{"path":387,"title":388,"description":389,"category":315,"order":385,"pro":305},"\u002Fdocs\u002Fgetting-started\u002Fbrand-setup","Бренд — логотип, цвета, контакты","Где настроить название заведения, логотип, контактные данные и первичные цвета, которые подтянутся в QR-меню и на сайт.",{"path":270,"title":391,"description":392,"category":286,"order":385,"pro":291},"Блок Hero — баннер первого экрана","Заголовок, подзаголовок, фон-картинка, CTA-кнопка. Как сделать сильный первый экран, куда вести кнопку.",{"path":394,"title":395,"description":396,"category":286,"order":397,"pro":291},"\u002Fdocs\u002Fsite-builder\u002Fmenu-block","Блок Меню (каталог товаров)","Макеты сетка\u002Fсписок\u002Fкарточки, карточек в ряд, slider категорий, что прятать-показывать. Главный блок любой витрины.",6,{"path":399,"title":400,"description":401,"category":286,"order":402,"pro":291},"\u002Fdocs\u002Fsite-builder\u002Ftext-image-gallery","Блоки Текст, Изображение, Галерея","Markdown-редактор с жирным\u002Fкурсивом\u002Fпереносами, спецварианты (часы работы, скидки), галерея-список.",7,{"path":404,"title":405,"description":406,"category":286,"order":407,"pro":291},"\u002Fdocs\u002Fsite-builder\u002Fcontacts-block","Блок Контакты","Телефон, адрес, карта, соцсети. Как переопределить данные глобальных настроек для конкретной страницы или локации.",8,{"path":409,"title":410,"description":411,"category":286,"order":412,"pro":291},"\u002Fdocs\u002Fsite-builder\u002Fmap-block","Блок Карта","Автодополнение адреса через Яндекс-Nominatim, встройка карты, метки, масштаб.",9,{"path":414,"title":415,"description":416,"category":286,"order":417,"pro":291},"\u002Fdocs\u002Fsite-builder\u002Fservice-blocks","Карточка товара, Кнопка заказа и служебные блоки","Product Card, Order Button, Categories, Cart, Checkout, Search — когда и зачем ставить.",10,{"path":419,"title":420,"description":421,"category":286,"order":422,"pro":291},"\u002Fdocs\u002Fsite-builder\u002Ffonts-buttons","Шрифты и стиль кнопок","10 шрифтовых семейств, размер 12–24 px, скруглённые vs прямые кнопки, тени и rpadding.",12,{"path":424,"title":425,"description":426,"category":286,"order":427,"pro":291},"\u002Fdocs\u002Fsite-builder\u002Fanimated-backgrounds","Анимированные фоны (Pro)","60+ эффектов — кастомные, Vanta-ported, ReactBits-ported. Переопределение цветов, reduce motion, производительность.",13,{"path":263,"title":264,"description":429,"category":286,"order":430,"pro":291},"layout_variant — section \u002F block \u002F empty. Как сделать блок на всю ширину или в виде карточки. Padding, border-radius, max-width.",14,{"path":432,"title":433,"description":434,"category":286,"order":435,"pro":291},"\u002Fdocs\u002Fsite-builder\u002Fseo-meta","SEO — глобальные и страничные мета-теги","Site-SEO vs Page-SEO. Title, description, keywords. OG-превью для соцсетей. Рекомендуемая длина.",15,{"path":437,"title":438,"description":439,"category":286,"order":440,"pro":291},"\u002Fdocs\u002Fsite-builder\u002Flogo-favicon-nav","Логотип, фавикон, название сайта и навигация","Загрузка логотипа (до 10 МБ), фавикон, site_name, nav_links (catalog \u002F page \u002F category \u002F url).",16,{"path":442,"title":443,"description":444,"category":286,"order":445,"pro":291},"\u002Fdocs\u002Fsite-builder\u002Fmedia-library","Медиа-библиотека","Папки и файлы (JPG \u002F PNG \u002F WebP \u002F GIF \u002F SVG до 10 МБ), загрузка, вставка в любой блок, public URL.",17,{"path":447,"title":448,"description":449,"category":286,"order":450,"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":453,"title":454,"description":455,"category":286,"order":456,"pro":291},"\u002Fdocs\u002Fsite-builder\u002Fcustom-domain","Собственный домен и поддомен","Настройка custom domain, subdomain fallback, TLS-сертификат. DNS-записи, проверка.",20,{"path":458,"title":459,"description":460,"category":287,"order":461,"pro":305},"\u002Fdocs\u002Fbilling\u002Ffree-vs-pro","Free vs Pro — что входит в каждый тариф","[object Object]",100,{"path":463,"title":464,"description":460,"category":287,"order":461,"pro":305},"\u002Fdocs\u002Fgetting-started\u002Ftrial-period","Что такое trial и что будет через 7 дней",{"path":466,"title":467,"description":460,"category":287,"order":461,"pro":305},"\u002Fdocs\u002Fqr-tables\u002Fguest-experience","Что видит гость после сканирования QR",{"path":469,"title":470,"description":460,"category":287,"order":461,"pro":305},"\u002Fdocs\u002Fsite-builder\u002Fcolor-palette","Цветовая палитра — 7 слотов, primary и secondary",{"path":472,"title":473,"description":460,"category":287,"order":461,"pro":305},"\u002Fdocs\u002Fsite-builder\u002Finterface","Интерфейс конструктора — 3 панели и toolbar",{"path":475,"title":476,"description":460,"category":287,"order":461,"pro":305},"\u002Fdocs\u002Fsite-builder\u002Fintroduction","Что такое конструктор витрины и зачем он нужен",1776913971894]