Медиа-запросы не работают должным образом на Android

Question

У меня 4 медиазапроса.1-й, 3-й и 4-й работают, но 2-й не активируется.

Почему 480x720 (второй медиа-запрос) по умолчанию соответствует первому медиа-запросу?

@media screen and (max-width: 320px) and (orientation: portrait) { body{background:#F0F;} }
@media screen and (min-width: 321px) and (max-width: 480px) and (orientation: portrait) { body{background:#F00;} }
@media screen and (max-width: 480px) and (orientation: landscape) { body{background:#0F0;} }
@media screen and (min-width: 481px) and (max-width: 800px) and (orientation: landscape) { body{background:#FF0;} }

Что ожидается:

Что на самом деле происходит:

Почему 480x720 (второй медиазапрос) по умолчанию соответствует первому медиазапросу?

Answer 1

Я новичок на Android и CSS.

Я решил, что Android не дает их реального размера с одной строкой в ​​заголовке моего файла index.html:

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

С тех пор мои CSS-файлы сделали то, что я ожидал!

Answer 2

Итак, после выполнения НАГРУЗКИ исследований я пришел к такому выводу, что телефоны Android, которые говорят, что они 480px на 720px (800px или 854px) на самом деле не являются, они используют более высокую плотность экрана, чтобы элементы выгляделибольше, так что они на самом деле работают на 320px на XXX , но пользователь может изменить разрешение на более низкую, если он того пожелает.Причина, по которой медиазапрос не работал, заключалась в том, что размеры не относились к рассматриваемому устройству.

Если на вашем SDK я изменил плотность экрана до 160, чтобы вместить 480px в ширину.

И я могу подтвердить, что я проверял это на SDK и 2x трубках.

Примечание: это был мой личный опыт, он может отличаться для других пользователей

Answer 3

Я думаю, вам нужно выполнить определение разрешения устройства в вашем медиа-запросе в соответствии с

@media (-webkit-min-device-pixel-ratio: 1.5),  
       (-o-min-device-pixel-ratio: 3/2),  
       (min--moz-device-pixel-ratio: 1.5),  
       (min-device-pixel-ratio: 1.5) {  
       /* high resolution styles */  
}  

Проверка Отличная статья Дэвида Калхуна о лучших мобильных практиках .

Answer 4

У меня были такие же проблемы при работе над приложением Cordova для платформы Android.Благодаря последнему ответу я попытался выяснить, где были различия между моим медиа-запросом и шириной экрана устройства.

Сначала я попытался:

@media only screen and (max-device-width: 480px) { ... }

Для соответствия устройств, подобныхHTC Desire HD |Samsung Galaxy S. Но я также должен был сделать определенные исправления для Samsung Galaxy Note, поэтому я использовал:

@media only screen and (min-device-width: 481px) { ... }

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

Итак, я хотел узнать, сколько пикселей по ширине было распознано как в DHD, так и в SGS, а затем в SGN:

window.innerWidth

Для ширины 480 пикселейтелефоны, я на самом деле был признан 320px.Для 800px Galaxy Note я распознал только 500px.Когда я увидел это, я настроил свои медиа-запросы, и это сработало.

Answer 5

Вот несколько вещей, которые я нашел в своем опыте, и это может быть связано с обнаружением с более высоким разрешением.Мой любимый тестовый телефон - 320px (max-device-width) X 480px (max-device-width) в портретной ориентации.Но в зависимости от того, какой мобильный браузер я использую, максимальная ширина может достигать 850 пикселей!Opera mobile использует 850px в качестве максимальной ширины по умолчанию, хотя на устройстве с максимальной шириной устройства 320px.Еще лучше;встроенный браузер Andriod на этом устройстве имеет максимальную ширину по умолчанию 550 пикселей.По умолчанию Dolphin имеет ту же максимальную ширину, 550 пикселей.Я обычно не тестирую на FireFox mobile, но так как это браузер на основе геккона, такой как Opera, я не удивлюсь, если он попадет в диапазон 850 пикселей.Кто-нибудь знает или проверял это?

Я обычно использую медиа-запрос с 3 условиями при обращении к устройствам 320 X 480.

@media all and (max-width:850px) and (max-width:550px) and (max-device-width:320px) {..}

Также я обычно помещаю этот метатег в свой заголовок на главномКод страницы здесь

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

Следующее не помогло мне, вот тогда я провел еще какое-то исследование и выяснил информацию выше.<meta name="viewport" content="width=device-width" /> Надеюсь, это поможет кому-то еще.

Answer 6

Поскольку мобильные телефоны представляют собой постоянно растущую чёрную дыру из-за путаницы в разрешении, вы должны сказать им, чтобы они идентифицировали себя.Вам также нужно установить масштабирование на 1 и убрать пользовательское масштабирование.Когда я вставляю это в свой код, это помогает мне.

Вставьте этот фрагмент в заголовок вашего HTML-кода в строку под тегом <meta character...>.

<!-- Check Device Width so Media Queries will work -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Answer 7

1. Конвертируйте все значения px в значения em, разделив их на 16 (так что 16px станет 1 em). Это гарантирует, что размеры имеют правильную пропорцию независимо от того, какой шрифт используется.
2. Добавить в окно просмотра мета: target-densitydpi=medium-dpi. Это гарантирует, что размеры em ведут себя одинаково на всех (большинстве?) Устройствах