@media запрос не работает на мобильных устройствах. Прекрасно работает в Chrome

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

@media screen and (min-device-width : 320px) and (max-device-width : 480px) {
            .container .backgroundImage { display: none; }
}

При просмотре в браузере есть фоновое изображение. s я хотел бы удалить это изображение при просмотре на мобильном устройстве, но его не работает каким-то образом.. пожалуйста, помогите

=============

ИСПЫТАНИЕ НА IPhone 3G, 4, 5, Android Galaxy Nexus

Ответ 1

@Энди прав, дважды проверьте свой device-widths, или вы всегда можете просто использовать min-width, чтобы вам не нужно было знать каждую ширину устройства.

Независимо убедитесь, что у вас есть тег viewport, например <meta name="viewport" content="width=device-width,initial-scale=1.0">.

Ответ 2

Фантастический - тоже забыл видовое окно! Fot all: Просто добавьте

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

в голове

Ответ 3

Я знаю, что это старый пост, но у меня недавно была такая проблема. Я закончил тем, что исправил это, удалив из медиа-запроса CSS из основной таблицы стилей CSS и введя конкретные потребности для мобильных устройств в разделе стиля html. Не знаю, почему это сработало, но это произошло.