Проблемы с отображением виджета на мобильных устройствах

На телефоне виджет может выглядеть иначе, чем на компьютере. Для мобильных устройств предусмотрены отдельные размеры, блок-превью и полноэкранный режим карты.

Если виджет слишком маленький, обрезан, не открывается или показывает только заставку, сначала проверьте его мобильные настройки.

Как виджет работает на телефоне

По умолчанию на мобильном устройстве посетитель сначала видит небольшой блок-превью. В нём могут находиться:

  • фоновая фотография или видео;
  • короткий текст;
  • кнопка «Открыть карту».

После нажатия на кнопку карта открывается на весь экран.

Блок-превью виджета на мобильном устройстве
Полноэкранный режим карты на телефоне

Проверьте мобильные настройки виджета

Настройки для телефона и компьютера задаются отдельно. Изменение десктопного варианта не меняет мобильный.

  1. Откройте раздел «Виджеты».
  2. Нажмите на карточку нужного виджета.
  3. Найдите настройки для мобильных устройств.
  4. Не перепутайте их с настройками для компьютера.
  5. Проверьте блок-превью, размеры, текст и фон.
  6. Сохраните виджет.
  7. Обновите страницу сайта на телефоне.
Отдельные настройки виджета для мобильных устройств

Если видна только заставка, а карты нет

При включённой настройке «Выводить блок-превью и открывать карту на весь экран» карта загружается после нажатия на кнопку.

  1. Найдите кнопку на блоке-превью.
  2. Нажмите «Открыть карту».
  3. Дождитесь окончания загрузки.
  4. Проверьте карту, список точек и фильтры.
  5. Для выхода используйте кнопку закрытия или кнопку «Назад» браузера.

Если кнопка «Открыть карту» не работает

Кнопка не сможет открыть карту, если скрипт Mapfolio не загрузился или на странице установлен неправильный код виджета.

  1. Обновите страницу.
  2. Нажмите кнопку ещё раз.
  3. Проверьте сайт в обычном мобильном браузере.
  4. Временно отключите VPN и блокировщик рекламы.
  5. Откройте редактор виджета.
  6. Скопируйте код установки заново.
  7. Сравните его с кодом на сайте.
  8. Опубликуйте страницу после замены кода.

Если не отображается фон блока-превью

Для мобильного блока-превью можно выбрать готовую или собственную фотографию, а также фоновое видео.

Если видео не загрузилось или его воспроизведение запрещено браузером, должна использоваться фотография-превью.

Проверьте собственный фон:

  • фотография — JPG, JPEG, PNG или WebP, не больше 5 МБ;
  • видео — MP4, MOV или WebM, не больше 10 МБ;
  • файл полностью загрузился;
  • нужный вариант фона выбран;
  • изменения виджета сохранены.
Настройка фона мобильного блока-превью

Если карта не загружается после открытия

Если полноэкранный режим открылся, но вместо карты появилась ошибка, проверьте API-ключ Яндекс Карт и подключение к интернету.

  1. Нажмите кнопку повторной загрузки карты, если она отображается.
  2. Проверьте интернет-соединение.
  3. Отключите VPN.
  4. Проверьте виджет через другую сеть.
  5. Убедитесь, что для API-ключа разрешён домен сайта.
  6. Проверьте срок действия и состояние ключа.

Если виджет неправильно выглядит после поворота телефона

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

  1. Подождите несколько секунд после поворота.
  2. Закройте открытые фильтры или карточку точки.
  3. Поверните телефон обратно.
  4. Обновите страницу.
  5. Откройте виджет повторно.

Если проблема возникает только во встроенном браузере

Ссылки из Telegram, ВКонтакте и других приложений могут открываться во встроенном браузере. Он может ограничивать работу карты, геолокации, видео или полноэкранного режима.

  1. Откройте меню встроенного браузера.
  2. Выберите «Открыть в браузере».
  3. Используйте актуальную версию Chrome, Safari, Firefox или другого современного браузера.
  4. Проверьте виджет ещё раз.

Проверьте изменения без старого кэша

Телефон может продолжать показывать предыдущие размеры или старый фон после сохранения новых настроек.

  1. Закройте страницу с виджетом.
  2. Откройте её заново.
  3. Если ничего не изменилось, используйте приватный режим.
  4. Проверьте сайт в другом браузере.
  5. Убедитесь, что страница сайта опубликована.

Частые проблемы

Что происходит Возможная причина Что сделать
На телефоне видна только заставка Включён блок-превью Нажать «Открыть карту» или отключить превью
Карта не открывается по кнопке Не загрузился скрипт Mapfolio Проверить код установки и блокировщики
Вместо фонового видео показывается фото Браузер ограничил автовоспроизведение Это допустимо; проверить фотографию-превью
Открылся интерфейс, но карты нет Проблема с API-ключом или сетью Проверить Яндекс Карты
После поворота нарушился размер Браузер не успел перестроить страницу Подождать или обновить страницу
В Chrome работает, а внутри приложения нет Ограничения встроенного браузера Открыть страницу во внешнем браузере

Полная проверка мобильного отображения

  1. Проверьте настройки именно для мобильных устройств.
  2. Определите, должен отображаться блок-превью или сразу карта.
  3. Если превью включено, проверьте кнопку «Открыть карту».
  4. Если превью отключено, установите ширину и высоту auto.
  5. Проверьте размеры HTML-блока на сайте.
  6. Убедитесь, что блок не скрыт на мобильных устройствах.
  7. Сохраните виджет и опубликуйте страницу.
  8. Проверьте сайт в приватном режиме.
  9. Откройте страницу в обычном мобильном браузере.
  10. Проверьте вертикальное и горизонтальное положение телефона.
  11. Если не работает только карта, проверьте API-ключ Яндекс Карт.
  12. Повторите проверку на другом телефоне.