Как лучше отобразить яндекс-карту на мобильном устройстве?
Доброе утро, народ.
Есть такой код: <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, время: 21:11. |