Почему не работает @media запрос на реальном планшете?

Question

[xDanbo]

Нужно, чтобы в айпадо-подобных разрешениях (1536 х 2048) в портретном режиме отображалось мобильное меню вместо полноценного десктопного. Во всех эмуляторах мобильных девайсов всё именно так и происходит, но на реальном планшете-китайце на Андроиде с экраном такого же разрешения медиа-запрос не срабатывает -- меню получается десктопным.

Строчку meta name="viewport" content="width=device-width, initial-scale=1" прописал, само условие перехода с мобильного меню на полное выглядит так:

@media screen and (min-width: 769px) {
... код
}

На подобное мой китаец тоже не реагирует:

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */ }

Должно быть так:

А получается так:


Есть идеи, почему так происходит?

Answer 1

[prodavec macdonalds]

нужно добавить в хеддер

<meta name="viewport" content="width=device-width">

Comments

[xDanbo]

Я эту строчку писал, тостер её затёр здесь в blockquote, отредактировал уже.

[Gish]

Спасибо большое за информацию, очень помогло :)

[sepaev]

Огромное спасибо. Такая мелочь, а времени убил на поиск ее ответа.

Все работает. Собирал сайт с помощью реакт Next.js. Там нужно всю голову собирать. И конечно же этого там тоже не оказалось.

Answer 2

[maxt888]

Значит разрешение больше чем 769px

Comments

[xDanbo]

Физически оно больше, конечно, такое же, как у айпадов с ретиной. Но есть же pixel-ratio, по которому запрос должен срабатывать.

[maxt888]

Мало ли кто кому должен)

[xDanbo]

Тогда так и скажу заказчику :)

[maxt888]

Ну что так сразу... Надо конечно дебажить, тут без этого никак)

[xDanbo]

Я уже совсем ничего не понимаю. Здесь https://www.browserstack.com можно потестить на реальных девайсах, и там всё чудесно работает на айпад эйр, как я и хотел. Но что с китайцем не так, ума не приложу.

[maxt888]

xDanbo: надо дебажить

Answer 3

[Igor Roschak]

media screen and (max-width: 768px) {
когда ширина экрана будет меньше 768px то будет применяться этот код
}

Comments

[xDanbo]

Такие запросы срабатывают у меня только в эмуляторах, на китайце с ретиной никакого эффекта.

[Igor Roschak]

разрешения окна браузера и матрицы устройства - это разные понятия, если не срабатывает медиа запрос значит окно браузера шире заданного разрешения.

[xDanbo]

Но ведь браузеры планшетов учитывают плотность пикселей матрицы, разве нет?

[Igor Roschak]

нет, всегда учитывается ширина браузера

[xDanbo]

Igor Roschak: ну вот у меня есть смартфон с экраном 1280 х 720. Браузер что там, что на планшете, стоит одинаковый - Опера. Переход меню на ПК-версию у меня в CSS записан с 769пх. И при этом на телефоне в ландшафтном режиме (1280 пх) меню отображается мобильное, как и нужно. А плотность пикселей там 2х, т.е. обычных 640пх.