Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.03.2023, 09:24
Новичок на форуме
Отправить личное сообщение для SeGun9 Посмотреть профиль Найти все сообщения от SeGun9
 
Регистрация: 26.03.2023
Сообщений: 4

Как лучше отобразить яндекс-карту на мобильном устройстве?
Доброе утро, народ.

Есть такой код:

<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&amp;width=1098&amp;height=492&amp;lang=ru_RU&amp;scroll=true;apikey=1dd33af4-3fad-4cba-bb4f-4e2fbdf0a400" ></script>



</div>

/* . . . */



Код:
@media (max-width:1000px){
 .ya_maps {
 
position: relative;
text-align: center; 
max-width: 1330px;
    top: 50px;
    left: 125px;     
 }
}
/* ..... */

Код:
@media (max-width:600px){
 
 .ya_maps {
 
position: relative;
text-align: center; 
max-width: 1330px;
    top: 300px;
    left: 12px;  
 }
}
. . .

Ссылка на сам сайт

Вопрос вот какой:
Каким образом лучше отобразить яндекс-карту при @media (max-width:600px)
Подставить другую ссылку (если да то как)?
Или же каким то образом масштабировать изображение этой ссылки?
Сейчас центр изображения съезжает.
Ответить с цитированием
  #2 (permalink)  
Старый 26.03.2023, 10:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

яндекс карта в размер окна
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&amp;width=${width}&amp;height=492&amp;lang=ru_RU&amp;scroll=true;apikey=1dd33af4-3fad-4cba-bb4f-4e2fbdf0a400`;
            s.src = url;
            document.querySelector('script:last-child').replaceWith(s);
        </script>
    </div>
</body>

</html>

Последний раз редактировалось рони, 26.03.2023 в 10:20.
Ответить с цитированием
  #3 (permalink)  
Старый 26.03.2023, 11:59
Новичок на форуме
Отправить личное сообщение для SeGun9 Посмотреть профиль Найти все сообщения от SeGun9
 
Регистрация: 26.03.2023
Сообщений: 4

Прошу прощения рони,
но у меня Win10 64, Сhrome - пример отображается так же как в вопросе.
Ответить с цитированием
  #4 (permalink)  
Старый 26.03.2023, 12:00
Новичок на форуме
Отправить личное сообщение для SeGun9 Посмотреть профиль Найти все сообщения от SeGun9
 
Регистрация: 26.03.2023
Сообщений: 4

Прошу прощения рони,
но у меня Win10 64, Сhrome - пример отображается так же как в вопросе.
Изображения:
Тип файла: jpg InWindowsSize.jpg (120.1 Кб, 1 просмотров)
Ответить с цитированием
  #5 (permalink)  
Старый 26.03.2023, 12:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

SeGun9,
скопируйте код на отдельную страницу, сделайте нужное разрешение, обновите страницу.
Ответить с цитированием
  #6 (permalink)  
Старый 26.03.2023, 19:25
Новичок на форуме
Отправить личное сообщение для SeGun9 Посмотреть профиль Найти все сообщения от SeGun9
 
Регистрация: 26.03.2023
Сообщений: 4

рони,
Спасибо! Это то, что нужно!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Подскажите как отобразить текст. potkin Общие вопросы Javascript 17 26.10.2017 15:09
Как лучше подключать SVG объект Black_Star (X)HTML/CSS 0 02.12.2016 00:09
Прошу высказать замечания как сделать лучше Vlasenko Fedor Элементы интерфейса 10 24.07.2014 13:47
Как лучше подгружать js? InviS Общие вопросы Javascript 0 15.09.2010 06:13
30(1|2) редирект от сервера. Или как лучше сделать редирект при верной отсылке форма. pizzZ AJAX и COMET 2 18.02.2010 09:06