Как я заставляю браузер Android WVGA прекращать масштабировать мои изображения?
Я разрабатываю страницу HTML для дисплея в браузерах Android. Рассмотрите эту простую страницу в качестве примера:
<html>
<head><title>Simple!</title>
</head>
<body>
<p><img src="http://sstatic.net/so/img/logo.png"></p>
</body>
</html>
Это смотрит очень хорошо по стандартным телефонам HVGA (320x480), но по размерам HDPI WVGA (480x800 или 480x854) встроенный браузер автоматически увеличивает масштаб изображения; это выглядит ужасным.
Я считал, что должен смочь использовать этот тег, чтобы вынудить браузер прекратить масштабировать мою страницу:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
... но все, что делает, отключают пользователя, масштабирующегося (кнопки масштабирования исчезают); это на самом деле не препятствует тому, чтобы браузер масштабировал мое изображение. Корректировка масштабных коэффициентов (устанавливающий их всех на 2,0 или 0.5) не имеет никакого эффекта вообще.
Как я могу вынудить браузер WVGA прекратить масштабировать мои изображения?
2 ответа
А, нашел это, поискав в исходном коде Android. Там есть новая специфическая для Android настройка "target-densityDpi", доступная в метатеге "viewport"; насколько я могу судить, она совершенно не документирована, за исключением комментария check-in!
Добавьте поддержку dpi для WebView.
В метатеге "viewport" вы можете указать "target-densityDpi". Если он не указан, то используется значение по умолчанию, 160dpi на сегодняшний день. Тогда коэффициент масштабирования 1.0, указанный в теге viewport, означает 100% на G1 и 150% на Sholes. Если вы установите "target-densityDpi" в значение "device-dpi", то масштабный коэффициент 1.0 означает 100% как на G1, так и на Sholes.
Реализована функция window.devicePixelRatio в Safari и медиазапрос css device-pixel-ratio.
Таким образом, если вы используете "device-dpi" и изменяете css для font-size и image src в зависимости от window.devicePixelRatio, вы можете получить лучшую страницу на сайте Sholes/Passion.
Вот список вариантов для "target-densityDpi".
device-dpi: Использовать исходное значение dpi устройства в качестве целевого dpi. низкое разрешение: 120 точек на дюйм medium-dpi: 160dpi, что также является значением по умолчанию на сегодняшний день высокий-dpi: 240dpi : Мы принимаем любое число между 70 и 400 в качестве допустимого целевого dpi.
Теперь это часть документации API для WebView: http://developer.android.com/reference/android/webkit/WebView.html
См. Раздел под названием Создание веб-страниц для поддержки различных экранов плотности