Существуют ли разные точки останова медиа-запросов из разных браузеров (Android), чего следует ожидать в целом?

Я протестировал медиа-запрос с использованием шести разных браузеров на 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 для всех шести браузеров)


person Håkan Olsson    schedule 29.07.2015    source источник


Ответы (2)


Следующий фрагмент кода устраняет проблему?

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
person Aniruddh Agarwal    schedule 09.08.2015

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

person Håkan Olsson    schedule 10.08.2015