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

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

У меня появилась задача разместить расположение места на сайте с помощью API Яндекс карты. Я это сделал, но на мобильных устройствах это выглядит ужасно, карта вылезает за рамки дисплея. Как мне сделать, чтоб размер карты адаптировался под мобильные устройства?
  • Вопрос задан
  • 7649 просмотров
Пригласить эксперта
Ответы на вопрос 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".
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы