Запрос @media не работает в мобильном телефоне. Прекрасно работает в Chrome

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

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

enter image description here

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

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

ТЕСТИРОВАНИЕ НА IPhone 3G, 4, 5, Android Galaxy Nexus

32
задан 25.03.2020, 20:57

3 ответа

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

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

106
ответ дан 25.03.2020, 20:57
  • 1
    #include " TargetConditionals.h"//, если Ваш источник находится в c – Scott Stensland 15.11.2019, 19:49
  • 2
    чувак..., которого Вы качаете...., я пропускал тег области просмотра в < head> – patel.milanb 25.03.2020, 20:58
  • 3
    Я включал метатег в голову. Все еще doesn' t работают на меня. – Anish Nair 25.03.2020, 20:59

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

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

в свою голову

19
ответ дан 25.03.2020, 20:58
  • 1
    У толпы StackOverflow есть проблема понимания прочитанного? Вопрос состоял в том, чтобы спросить о различении в время выполнения не во время компиляции! Правильный ответ является макросом SIM Fernando Cervantes, и не этим. Все же с этой записи комментария, этот неправильный ответ имеет 32 точки, и правильный имеет, но 3. – StCredZero 15.11.2019, 19:50

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

2
ответ дан 25.03.2020, 20:58
  • 1
    @StCredZero, Возможно, который это вызвано тем, что код скомпилировал для работы средства моделирования can' t работают на устройстве и наоборот, таким образом, в конце это doesn' t имеют значение, делаете ли Вы проверку во время компиляции или во время выполнения. – Johan Kool 15.11.2019, 19:50

Теги

Похожие вопросы