Яндекс карты не адаптируются в мобильной версии сайта

Question

Скажите пожалуйста, я скопировал код для размещения карты из яндекс бизнес на сайт, но она не адаптируется под мобильные устройства, работает нормально только для десктопа и планшета, а для смартфонов вылазит за границы. Что нужно исправить в коде, чтобы карта была адаптивна? Изначально код такой: <iframe src="https://yandex.ru/map-widget/v1/?z=12&ol=biz&oid=98281926362" width="560" height="400" frameborder="0"></iframe> Изменение атрибута width 100% результатов не дало, сейчас покажу почему. Мы изначально хотели бы, чтобы карта в режиме десктопа отображалась по ширине блока сайта и сужалась автоматически при переходе на мобильный телефон.

Для этого мы указали код со следующими параметрами: <iframe src="https://yandex.ru/map-widget/v1/?z=12&ol=biz&oid=98281926362" width="1080" height="600" frameborder="0" title="BWBG в Яндекс Картах"></iframe>
Но при переходе в режим смартфона она выходит за границы экрана.
Если мы используем код: <iframe src="https://yandex.ru/map-widget/v1/?z=12&ol=biz&oid=98281926362" width="100%" height="400" frameborder="0"></iframe>

Тогда карта еще на стадии десктопа выглядит узко и обрезанной полностью.

При этом в режиме смартфона, карта по коду с атрибутом width 100% не выходит за границы и выглядит отлично.

Вопрос: как нам написать код так, чтобы на десктопе карта выглядела во всю ширину страницы, как у указано в пункте 1, а при переходе в режим смартфона она автоматически сужалась и не выходила за границы, как указано в пункте 4? Заранее спасибо!

Answer 1

Можно, конечно, использовать адаптивный css.

<iframe class="my-widget" src="https://yandex.ru/map-widget/v1/?z=12&ol=biz&oid=98281926362" frameborder="0" title="BWBG в Яндекс Картах"></iframe>

.my-widget {
    width: 100%;
    height: 400px;
}
@media(min-width: 1200px){
    .my-widget {
        width: 1080px;
        height: 600px;
    }
}

Но с другой стороны, если у вас ширина 100% выглядит узко, значит проблема в вёрстке - родительский объект становится слишком узким. Ведь фрейм в этом случае принимает ширину родительского элемента.

БЛОГ НА HUSL

Яндекс карты не адаптируются в мобильной версии сайта

Ответы (1 шт):