Как лучше отобразить яндекс-карту на мобильном устройстве?
Доброе утро, народ.
Есть такой код: <div class="ya_maps" align="center"> <script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A6730281fefcf43d1fbd19b55c3540dd91419de37436606a4e46889a1a119446a&width=1098&height=492&lang=ru_RU&scroll=true;apikey=1dd33af4-3fad-4cba-bb4f-4e2fbdf0a400" ></script> </div> /* . . . */ Код:
@media (max-width:1000px){Код:
@media (max-width:600px){Ссылка на сам сайт Вопрос вот какой: Каким образом лучше отобразить яндекс-карту при @media (max-width:600px) Подставить другую ссылку (если да то как)? Или же каким то образом масштабировать изображение этой ссылки? Сейчас центр изображения съезжает. |
яндекс карта в размер окна
SeGun9,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
.ya_maps {
margin: 30px auto;
}
</style>
</head>
<body>
<div class="ya_maps" align="center">
<script>
let width = window.innerWidth * .8 | 0;
let s = document.createElement('script');
let url = `https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A6730281fefcf43d1fbd19b55c3540dd91419de37436606a4e46889a1a119446a&width=${width}&height=492&lang=ru_RU&scroll=true;apikey=1dd33af4-3fad-4cba-bb4f-4e2fbdf0a400`;
s.src = url;
document.querySelector('script:last-child').replaceWith(s);
</script>
</div>
</body>
</html>
|
Прошу прощения рони,
но у меня Win10 64, Сhrome - пример отображается так же как в вопросе. |
Вложений: 1
Прошу прощения рони,
но у меня Win10 64, Сhrome - пример отображается так же как в вопросе. |
SeGun9,
скопируйте код на отдельную страницу, сделайте нужное разрешение, обновите страницу. |
рони,
Спасибо! Это то, что нужно! |
| Часовой пояс GMT +3, время: 09:09. |