CSS фонът на цял екран работи в Dev-tools, но не и в реалния браузър

Създадох приложение/уебсайт на Meteor и се опитвам да имам адаптивно фоново изображение на цял екран в горната част на тази страница (https://www.conducate.com).

Работи според очакванията в инструментите за разработчици на Chrome, както и в режима на Safari Responsive Design, но когато внедря страницата и я гледам на мобилния си телефон, изглежда, че увеличава горната част на изображението и не го преоразмерява както се очаква от инструментите за разработка. В резултат на това има само сиво замъгляване.

Някой от вас сблъсквал ли се е с този проблем преди? Трудно е да се отстраняват грешки, тъй като работи правилно във всички инструменти за разработчици, но изобщо не, когато се гледа на мобилно устройство.

По-долу има връзка към изображение с екранни снимки, едната от моя мобилен телефон (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