How to implement an adaptive api Yandex map on the site?

Question

API

Hello.
I have a task to place the location of a place on the site using the Yandex Maps API. I did it, but on mobile devices it looks terrible, the map crawls out of the display. How can I make the map size adapt to mobile devices?

Answer 1

Use css

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

Even when loading, you can determine the size of the window using javascript and put the necessary parameters in the Yandex Maps script.
example with 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,
        });
}

Answer 2

The author of the question did not find the answer? If you found it, could you share it?

Answer 3

I didn’t understand Yandex maps, I found a solution with google map

Answer 4

You just need to replace the fixed width and height with "auto" in the code that you insert on the site.