Как реализовать адаптивную api яндекс карту на сайте?

Здравствуйте.

У меня появилась задача разместить расположение места на сайте с помощью API Яндекс карты. Я это сделал, но на мобильных устройствах это выглядит ужасно, карта вылезает за рамки дисплея. Как мне сделать, чтоб размер карты адаптировался под мобильные устройства?
  • Вопрос задан
  • 7359 просмотров
Пригласить эксперта
Ответы на вопрос 4
@ghost23
Используйте css

#map {
        width: 640px; height: 600px;
}
@media (max-width: 320px) {
      #map {
        width: 260px; height: 300px;
      }
}


Еще при загрузке можно определить при помощи javascript размер окна и поставить нужные параметры в скрипт яндекс карт.

пример с jquery
var viewport = {
    width : $(window).width(),
    height : $(window).height()
};
var width = viewport.width;
var height = viewport.height;

if (width > 1000) {
var zoomval = 13;
} else {
var zoomval = 12;
}

function init() {
    myMap = new ymaps.Map("map", {
        center: [55.555555, 33.333333],
        zoom: zoomval,
        });
}
Ответ написан
Автор вопроса не нашел ответ? Если нашли не могли бы поделиться?
Ответ написан
privetizkosmosa
@privetizkosmosa Автор вопроса
с яндекс картами не разобрался, нашел решение с google map
Ответ написан
Rager
@Rager
Нужно всего лишь в коде, который вы вставляете на сайт, заменить фиксированные width и и height на "auto".
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
AUTEP Москва
от 100 000 до 300 000 руб.
Монографик Москва
от 60 000 до 100 000 руб.
Frogogo Москва
от 60 000 до 80 000 руб.
17 нояб. 2019, в 19:40
1000 руб./за проект
17 нояб. 2019, в 19:34
120000 руб./за проект
17 нояб. 2019, в 19:17
2000 руб./за проект