Я протестировал медиа-запрос с использованием шести разных браузеров на Huawei Ascend Y330/Android 4.2 и получил три разных результата по ширине устройства, о которых сообщает mqtest.io.
Затем для каждого браузера я проверил фактические точки останова на своей собственной html-странице с помощью CSS, например: @media only screen and (max-device-width: 320px)
-- и изменяя значение пикселя до тех пор, пока не появится изменение форматирования. Ширина устройства во всех шести случаях соответствует тому, что сообщил mqtest.io для устройства.
Очевидно, проблема в том, что нельзя контролировать дизайн из-за несовместимости браузера. Это «локальная» проблема или это общая проблема при использовании @media
?
Результаты согласно mqtest.io и тесту веб-страницы
Браузер Dolphin и Android по умолчанию
ширина устройства: 480 пикселей
высота устройства: 800 пикселейOpera и Google Chrome
ширина устройства: 320 пикселей
высота устройства: 534 пикселяFirefox и бета-версия Firefox
ширина устройства: 320 пикселей
высота устройства: 533 пикселейЭкран: 480x800
Соотношение пикселей: 1,5 (по данным mqtest.io для всех шести браузеров)