Как заставить браузер WVGA Android перестать масштабировать мои изображения?
Я разрабатываю страницу 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. В метатеге " viewport " доступен новый параметр " target-densityDpi " для Android; насколько я могу судить, это совершенно недокументировано, за исключением комментария о регистрации!
Добавить поддержку точек на дюйм для WebView.
В метатеге "viewport" вы можете указать "target-densityDpi". Если он не указан, он использует значение по умолчанию, 160dpi на сегодняшний день. Тогда коэффициент масштабирования 1,0, указанный в теге области просмотра, означает 100% для G1 и 150% для Sholes. Если вы установите "target-densityDpi" в "device-dpi", то коэффициент масштабирования 1,0 означает 100% как для G1, так и для Sholes.
Реализованы Safari window.devicePixelRatio и css media-device-pixel-ratio.
Так что, если вы используете "device-dpi" и изменяете CSS для размера шрифта и src изображения в зависимости от window.devicePixelRatio, вы можете получить лучшую страницу в Sholes/Passion.
Вот список параметров для "target-densityDpi".
device-dpi: использовать собственный dpi устройства как целевой dpi. низкое dpi: 120 точек на дюйм, среднее dpi: 160 точек на дюйм, что также является значением по умолчанию на сегодняшний день. high dpi: 240 точек на дюйм: мы принимаем любое число от 70 до 400 в качестве допустимого целевого разрешения.
Теперь это часть документации API для WebView: http://developer.android.com/reference/android/webkit/WebView.html
См. Раздел " Создание веб-страниц для поддержки различных плотностей экрана".