Ваш промокод mojWPAds на плагин рекламы для WordPress >>

Как сделать карту Яндекс на сайте адаптивной

Вопрос: Как сделать карту Яндекс на сайте адаптивной, чтобы она хорошо смотрелась на мобильном телефоне, планшете и на компьютере?

Ответ: Чтобы сделать подобное, необходимо будет "взять" карту Яндекс в дополнительный контейнер div и задать ему максимальную ширину. Это нужно, чтобы она нормально смотрелась на компьютере.

А в самом скрипте карты мы заменим фиксированный параметр ширины на 100%.

Т.е. выглядеть ваш блок с картой будет так:

<div style="max-width: 600px;">
<script type="text/javascript" charset="utf-8" src="https://api-maps.yandex.ru/services/constructor/1.0/js/?sid=fExh3I5eIMZBnUZoHbXop9mOdMEygWRJ&width=100%&height=450"></script>
</div>

Обратите внимание:

  • max-width:600px; я выставляю максимальную ширину блока с картой. Вы ставите свой значение.
  • Уже в самом скрипте карты я заменил фикс. ширину на width=100%, чтобы она подстраивалась под размер экрана устройств.

Это самое простое решение и не требует подключения других скриптов, для адаптации карты.

Привет. Меня зовут Виталик.

Я автор этого блога, а так же Магазина WordPress https://wp-r.ru/ и ридера блогов вебмастеров и SEO-специалистов WMSN.ru


Отблагодарить Z888279575784 R109400923968 или ЯД 41001651742138

Я в Twitter @mojWP. Смотри на Youtube. Читай RSS блога.

Опубликован 1 комментарий
  1. Kanmariks says:
    http://like-magazik.ru/

    «Все клики одним цветом» — аналогично монохромной карте, но клики отображаются не областями, а точками.

Не держи в себе. Выскажись.

Ваш e-mail не будет опубликован. Обязательные поля помечены *

© 2011-2017 | mojwp.ru | Копирование материала разрешено только с письменного согласия
WordPress: 12.88MB | MySQL:130 | 0,287sec
Лучшие плагины для сайта WordPress
Магазин WordPress WP-R.ru
Я понял, не показывай больше.
Смотри мои обучающие видео на YouTube
Сайт использует cookieСайт использует cookieСайт использует cookieСайт использует cookieСайт использует cookieСайт использует cookieСайт использует cookieСайт использует cookie
Друг, не уходи!