Android-браузер игнорирует отзывчивый веб-дизайн

Я только что начал конвертировать мой сайт с "Отзывчивым веб-дизайном". Я установил плагин "Веб-разработчик" для Firefox (http://chrispederick.com/work/web-developer/), чтобы проверить, работает ли он. Все выглядело отлично.

Теперь я попробовал это с моим телефоном Android. Я не работал правильно для портретного режима... Я отслеживал проблему до неправильного обращения с медиа-селекторами @по телефону:

На этой странице (https://worldtalk.de/m/test.php) создается CSS, который выводит значения высоты/ширины и высоты устройства/высоты + ширины браузера, используемого в качестве параметров.

Я получил следующие результаты:

  • портрет, 800x1200
  • пейзаж, 800x400

Ориентация была правильной, ширина/высота и ширина/высота устройства были одинаковыми для обеих ориентаций. Но устройство (HTC Desire Z) просто использует неправильное разрешение экрана (800x1200) для портретного режима. Я бы хотел, чтобы у вас не было базы данных устройств с пользовательскими агентами или что-то в этом роде.

Дополнительная информация:

  • Браузер-версия: WebKit/533.1
  • Android 2.3.3/Sense 2.1
  • HTC Desire Z (прошивка T-Mobile)
  • JavaScript сообщает о идентичном разрешении экрана

Вопросов:

  • Это только моя модель телефона или общее поведение браузера Android?
  • Как это исправить?

ОТВЕТЫ

Ответ 1

После еще нескольких исследований по этой теме я нашел следующее решение. Чтобы сообщить браузеру об отключении масштабирования, необходимо добавить следующий <meta> -Tags. Затем селектора CSS @media работают как ожидалось.

<meta content="True" name="HandheldFriendly">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="viewport" content="width=device-width">

См.: Как я могу отключить масштабирование на мобильной веб-странице? И: http://garrows.com/?p=337 (EDIT: http://garrows.com/blog/disable-mobile-browser-zoom-функция

С Уважением,

Стефан

-- редактировать --

При применении вышеуказанного решения: для некоторых устройств разрешение устройства, указанное при использовании "scale = 1.0", меньше, чем физическое разрешение экрана, и у вас могут быть эффекты, такие как размытые изображения. Это вызвано увеличением dpi (точек на дюйм) экрана. Однако размер экрана, указанный в JavaScript, является правильным. Для небольших экранов с высоким разрешением правильное разрешение "физического пикселя" может быть достигнуто с помощью:

<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device-width, initial-scale=0.666667, maximum-scale=0.666667, user-scalable=0">
<meta name="viewport" content="width=device-width">

Однако это должно вызвать проблемы с экраном, где значение dpi ниже. Кажется более безопасным использовать разрешение экрана, сообщенное JavaScript.

-- редактировать --

Используйте запятые вместо точек с запятой, чтобы избежать ошибок консоли Chrome в отношении значения параметра "Viewport" device-width; " для ключевой "ширина" не распознается. Содержание игнорируется.

http://royaltutorials.com/viewport-argument-value-device-width-for-key-width-not-recognized-content-ignored/