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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Поскольку сотовые телефоны представляют собой постоянно растущую черную дыру путаницы с разрешением, вам нужно сказать им, чтобы они идентифицировали себя. Вам также нужно установить масштабирование на 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" />

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