У меня были всевозможные проблемы с использованием медиазапросов на Desire HD, потому что браузер Android автоматически отображает страницу с более высоким разрешением и уменьшает ее. В основном он думает, что у него гораздо более широкая ширина экрана, чем у него.
Я обнаружил, что решением этой проблемы было остановить масштабирование с помощью тега Meta Viewport ...
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
Сначала кажется, что это сработало, потому что запускает правильный медиа-запрос. Телефон имеет разрешение по горизонтали 480px, и он запускает мой (320px-480px) медиа-запрос.
Затем я использовал JavaScript для вывода вычисленного окна просмотра на экран ...
var windowWidth = $(window).width();
$('div.windowWidthLabel').text("Window Width: " + windowWidth + "px");
Вычисленный с был 369px, который я думал, было очень странно. Затем я проверил его с помощью медиазапроса, для которого min и max были установлены 369 пикселей, и он сработал (что по крайней мере соответствует). Так почему браузер считает, что это 369 пикселей, когда собственное разрешение составляет 480 пикселей?
Любая помощь будет принята с благодарностью.
Jon