Задаваните от медиите заявки работят на устройството, но не и при преоразмеряване на браузъра - css3, отзивчив дизайн, заявки за мултимедия

Изглежда имам противоречив проблем на много другихората, когато става дума за използване на медийни заявки: Не мога да направя различните заявки, когато се преоразмерявам в браузъра, но когато влизам в уеб страницата на моя iphone, тя работи добре.

http://dknytkom.dk/forside/

Тествах го, като добавих цвят на фона към основния си контейнер, но промяната в цвета се случва само на самия iPhone, а не на самия браузър. Например аз писах:

В горната част на моя grid2.ccs съм задал бг-цвета на основния контейнер на синьо. След това пиша:

@media only screen (min-width : 768px) and (max-width : 1254px) {
body, #main-container { background-color:pink;}
}

и още по-надолу:

@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {body, #main-container { background-color:yellow;}

Промените в цвета се появяват - но само моето устройство (iPhone), а не в браузъра.

ЗАБЕЛЕЖКА: Може би тази нишка е на нещо: Метални запитвания - Мобилен срещу Desktop Браузър

"Ако използвам максимум ширина на устройството вместо максимална ширина, той става по-отзивчив в мобилните браузъри, но не в настолните браузъри ..."

Отговори:

И да - както се окаже, причината за промените, които не се появяват в браузъра, е, че аз определих CSS за мин устройство ширина и макс устройство ширина.

Използване точно мин ширина и макс ширина това не беше хитрост