Полноэкранный фон CSS работает в Dev-tools, но не в реальном браузере

Я создал приложение/веб-сайт Meteor и пытаюсь создать отзывчивое полноэкранное фоновое изображение в верхней части этой страницы (https://www.conducate.com).

Он работает, как и ожидалось, в инструментах разработчика Chrome, а также в режиме адаптивного дизайна Safari, но когда я разворачиваю страницу и смотрю на нее на своем мобильном телефоне, кажется, что верхняя часть изображения увеличивается, а не изменяется. как и ожидалось от dev-tools. В результате можно увидеть только серое пятно.

Кто-нибудь из вас уже сталкивался с этой проблемой? Его сложно отлаживать, так как он корректно работает во всех инструментах разработчика, но совсем не работает при просмотре на мобильном устройстве.

Ниже приведена ссылка на изображение со снимками экрана, один с моего мобильного телефона (iPhone 6s, браузер Safari), а другой — с режима адаптивного дизайна Safari на моем Mac. К сожалению, я не могу опубликовать изображение из-за отсутствия репутации, поэтому я могу просто опубликовать ссылку - я здесь еще новичок...

https://s3.eu-central-1.amazonaws.com/conducate-images/stackoverflow/example_screenshots.png

Любая помощь высоко ценится!


html css responsive-design fullscreen
person Kon    schedule 20.05.2017    source источник
comment
Какой телефон вы используете?   -  person Sorikairo    schedule 20.05.2017
comment
Я использую iPhone 6s, и у меня проблема с Chrome и Safari на этом телефоне.   -  person Kon    schedule 20.05.2017
comment
Как вы думаете, вы можете сделать минимально воспроизводимый пример, демонстрирующий проблему?   -  person Mr Lister    schedule 20.05.2017
comment
Моя проблема в том, что я не знаю, какой компонент вызывает проблему. Поэтому я подумал, что размещение ссылки на веб-сайт поможет, так как я не мог воспроизвести проблему без развертывания чего-либо, потому что проблема не отображается в инструментах разработчика.   -  person Kon    schedule 20.05.2017
comment
Никаких особых проблем на Android. Выложите хотя бы скриншот. Удалите свой URL-адрес, если вы ограничены репутационными привилегиями, или начните получать репутацию.   -  person ghybs    schedule 20.05.2017
comment
Спасибо за ваш комментарий. Тот факт, что он работает на Android, дает мне кое-что для Google. Я дам вам знать, если что-то появится. Я добавил ссылку на пару скриншотов выше - вы правы насчет моей нерепутации. Обязательно над этим поработаю   -  person Kon    schedule 20.05.2017

Ответы (1)


arrow_upward
0
arrow_downward

После некоторого поиска специфичных для iOS проблем я наконец нашел решение проблемы, посмотрев на некоторые другие примеры.

Оказывается, большинство браузеров понимают строку css

.container{
   background: url(http://www.link-to-image.jpg)
   ...
}

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

.container{
 background-image: url(http://www.link-to-image.jpg)
 ...
}
person Kon    schedule 24.05.2017