Почему background-image не адаптивный на айфоне?

Question

[Ирина Кириллова]

Делаю сайт на Wordpress, на главной странице background-image отображается нормально на разных экранах (если масштабировать окно браузера), но захожу на сайт с айфона, и картинка получается такой огромной, что вместо баннера я вижу маленький кусочек фона. В общем, картинка не сужается, не уменьшается, а остается в натуральной величине. На других телефонах всё ок. В чем может быть проблема? Подскажите плиз. Сайт: superburger.ho.ua

Answer 1

[sergski]

Возможно из-за высоты, независимо от размера экрана:
.home .banner {height: 580px; }
и еще хорошо бы указать

<meta name="viewport" content="width=device-width, initial-scale=1" />

Comments

[Ирина Кириллова]

прописала meta, в media only screen and (max-width: 320px) прописала меньшую высоту, паддинги, не помогает :(

[sergski]

Ирина Кириллова: медиавариант для 320 вы прописали, но height там нет

[Ирина Кириллова]

я просто удалила значение, т.к. этот вариант не помогает, просто цветная полоска с кусочком фона похудела, а вся картинка так и не отобразилась.

[sergski]

Ирина Кириллова: но трабла там. попобуйте в медиаварианте для .banner прописать max-width: 320px; heght: auto

[Ирина Кириллова]

прописала, не помогает... может, вообще баннер скрыть на мобильных? :) чтоб не мучиться и вас и не мучить :) посоветуйте как профессионал: нужен ли вообще этот баннер на таких экранах?

[Ирина Кириллова]

или создать мини-вариант картинки отдельно и в медиа прописать новый background-image?

[sergski]

Ирина Кириллова: по-хорошему под каждый медиавариант должна быть своя картинка, грузить фото в 1500 px на мобильный странно. Или сделайте для .banner background-image: none; а сам блок скройте.

[Ирина Кириллова]

ок, спасибо большое, так и сделаю :)

[Ирина Кириллова]

вы случайно не занимаетесь наставничеством? или консультации платные?

[sergski]

Ирина Кириллова: пока только на Тостере по мере сил)