Поддержка различных экранов в веб-приложениях

Поскольку Android доступен на устройствах с различными размерами экрана и плотностью пикселей, учтите эти факторы в своем веб-дизайне, чтобы ваши страницы имели правильный размер. WebView поддерживает функции DOM, CSS и метатеги, которые помогут вам правильно отображать веб-контент.

При таргетинге веб-страниц на устройства под управлением Android необходимо учитывать два основных фактора:

Окно просмотра
Область просмотра — это прямоугольная область, которая обеспечивает прорисовываемую область вашей веб-страницы. Вы можете указать несколько свойств видового экрана, например его размер и начальный масштаб. Наиболее важным является ширина области просмотра, которая определяет общее количество горизонтальных пикселей, доступных с точки зрения веб-страницы — количество доступных пикселей CSS.
Плотность экрана
Класс WebView и большинство веб-браузеров на Android преобразуют значения пикселей CSS в значения пикселей, не зависящие от плотности, поэтому ваша веб-страница имеет тот же воспринимаемый размер, что и экран средней плотности — около 160 точек на дюйм. Однако, если графика является важным элементом вашего веб-дизайна, обратите внимание на масштабирование, которое происходит при различной плотности. Например, изображение шириной 300 пикселей на экране с разрешением 320 точек на дюйм масштабируется — оно использует больше физических пикселей на пиксель CSS. Это может привести к таким артефактам, как размытие и пикселизация. Для простоты Android разбивает большинство экранов с меньшей плотностью на несколько общих категорий: малые, средние и большие. Подробнее о плотности экрана читайте в статье «Поддержка различной плотности пикселей» .

Обратитесь к следующим соответствующим ресурсам:

Укажите свойства видового экрана

Область просмотра — это область, в которой отображается ваша веб-страница. Хотя общая видимая область области просмотра соответствует размеру экрана при максимальном уменьшении, область просмотра имеет свои собственные размеры в пикселях, которые становятся доступными для веб-страницы. Например, хотя экран устройства может иметь физическую ширину 480 пикселей, область просмотра может иметь ширину 800 пикселей. Это позволяет веб-странице шириной 800 пикселей быть полностью видимой на экране, когда масштаб области просмотра равен 1,0.

Большинство веб-браузеров на Android, включая Chrome, по умолчанию устанавливают большой размер области просмотра. Этот _широкий режим просмотра_ имеет ширину около 980 пикселей. Многие браузеры также по умолчанию уменьшают масштаб, насколько это возможно, чтобы отобразить всю ширину области просмотра, известную как _режим обзора_.

Вы можете определить свойства области просмотра для своей веб-страницы, такие как ширина и начальный уровень масштабирования, используя тег <meta name="viewport" ...> в вашем документе <head> .

Следующий синтаксис показывает все поддерживаемые свойства области просмотра и типы значений, принимаемые каждым из них:

<meta name="viewport"
      content="
          height = [pixel_value | "device-height"] ,
          width = [pixel_value | "device-width"] ,
          initial-scale = float_value ,
          minimum-scale = float_value ,
          maximum-scale = float_value ,
          user-scalable = ["yes" | "no"]
          " />

Например, следующий тег <meta> указывает, что ширина области просмотра соответствует ширине экрана устройства и что возможность масштабирования отключена:

<head>
    <title>Example</title>
    <meta name="viewport" content="width=device-width, user-scalable=no" />
</head>

При оптимизации сайта для мобильных устройств вы обычно устанавливаете ширину "device-width" чтобы размер точно подходил для всех устройств, а затем используете медиа-запросы CSS для гибкой адаптации макетов к различным размерам экрана.

Плотность целевых устройств с помощью CSS

WebView поддерживает -webkit-device-pixel-ratio — медиа-функцию CSS, позволяющую создавать стили для определенной плотности экрана. Значение, которое вы применяете к этой функции, должно быть 0,75, 1 или 1,5, чтобы указать, что стили предназначены для устройств с экранами низкой, средней или высокой плотности соответственно.

Вы можете создать отдельные таблицы стилей для каждой плотности:

<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" />

Или укажите разные стили в одной таблице стилей:

#header {
    background:url(medium-density-image.png);
}

@media screen and (-webkit-device-pixel-ratio: 1.5) {
    /* CSS for high-density screens */
    #header {
        background:url(high-density-image.png);
    }
}

@media screen and (-webkit-device-pixel-ratio: 0.75) {
    /* CSS for low-density screens */
    #header {
        background:url(low-density-image.png);
    }
}

Дополнительные сведения об обработке изображений с различной плотностью экрана, особенно изображений, см. в разделе Изображения с высоким разрешением для переменной плотности пикселей .

Целевая плотность устройств с помощью JavaScript

WebView поддерживает window.devicePixelRatio — свойство DOM, позволяющее запрашивать плотность текущего устройства. Значение этого свойства определяет коэффициент масштабирования, используемый для текущего устройства. Если значение window.devicePixelRatio равно 1,0, то устройство считается устройством средней плотности, и по умолчанию масштабирование не применяется. Если значение равно 1,5, то устройство считается устройством высокой плотности, а страница по умолчанию масштабируется в 1,5 раза. Если значение равно 0,75, то устройство считается устройством с низкой плотностью, а страница по умолчанию масштабируется 0,75x.

Масштабирование, применяемое браузером Android и WebView , основано на целевой плотности веб-страницы. Как описано в разделе , определяющем целевую плотность области просмотра , целью по умолчанию является средняя плотность, но вы можете изменить цель, чтобы повлиять на масштабирование вашей веб-страницы для различных плотностей экрана.

Например, вот как вы можете запросить плотность устройств с помощью JavaScript:

if (window.devicePixelRatio == 1.5) {
  alert("This is a high-density screen");
} else if (window.devicePixelRatio == 0.75) {
  alert("This is a low-density screen");
}