Ответ 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; " для ключевой "ширина" не распознается. Содержание игнорируется.