Чтобы переводить контент на ваш предпочитаемый язык, Google использует технологии на основе искусственного интеллекта. Переводы от ИИ могут содержать ошибки.

Как обеспечить поддержку разных экранов в веб-приложениях

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

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

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

Информация по теме:

Как задать свойства области просмотра

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

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

Примечание. Когда страница отображается в WebView, по умолчанию не используется режим широкого окна просмотра. Широкий режим просмотра можно включить с помощью параметра setUseWideViewPort().

Вы можете задать свойства области просмотра для своей веб-страницы, например ширину и начальный уровень масштабирования, с помощью тега <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 @media для гибкой адаптации макетов к разным размерам экрана.

Как задать плотность целевого устройства с помощью CSS

WebView поддерживает -webkit-device-pixel-ratio – функцию CSS media, которая позволяет создавать стили для экранов с определенной плотностью пикселей. Значение должно быть равно 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,75 раза.

Масштабирование, которое применяют браузер 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");
}