Запросы СМИ не ведут себя так, как ожидалось на Android

У меня есть 4 медиа-запросов. 1-я, 3-я и 4-я работы, но вторая, похоже, не активируется.

Почему 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;} }

Ожидается:

1st Media Query CSS Output2nd Media Query CSS Output3rd Media Query CSS Output4th Media Query CSS Output

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

2nd Media Query fails1st Media Query passes3rd Media Query passes4th media query passes

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

Ответы

Ответ 1

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

@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 */  
}

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

Ответ 2

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

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

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

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

Ответ 3

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

Если на SDK я изменил плотность экрана до 160 для размещения 480 пикселей в ширину.

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

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

Ответ 4

У меня были те же проблемы во время работы над приложением Кордовы для платформы 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 пикселей, я действительно распознал 320 пикселей. Для 800px Galaxy Note я получил только 500px. Когда я это увидел, я настроил свои медиа-запросы, и это сработало.

Ответ 5

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

Обычно я использую 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" /> Надеюсь, что это поможет кому-то другому.

Ответ 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" />

Ответ 7

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