Эта страница переведена с помощью Cloud Translation API.

Идеальный для пикселей WebView

Опубликовано: 28 февраля 2014 г.

Существует ряд опций, которые вы можете использовать для создания идеального интерфейса для вашего WebView.

Установите метатег области просмотра

Метатег области просмотра — один из наиболее важных тегов, которые следует добавить в ваше веб-приложение. Без него WebView может вести себя так, как будто ваш сайт предназначен для настольных браузеров. Это приведет к тому, что вашей веб-странице будет присвоена большая ширина (обычно 980 пикселей) и она будет масштабироваться в соответствии с шириной WebView. В большинстве случаев это приводит к созданию крошечной обзорной версии страницы, которая требует от пользователя панорамирования и масштабирования, чтобы действительно прочитать контент.

Если вы хотите, чтобы ширина вашего сайта составляла 100% ширины WebView, установите метатег области просмотра:

<meta name="viewport" content="width=device-width, initial-scale=1">

Установите для ширины специальное значение ширины устройства, чтобы получить больше контроля над макетом страницы.

По умолчанию WebView устанавливает область просмотра по ширине устройства, а не по умолчанию для области просмотра рабочего стола. Однако для обеспечения надежного и контролируемого поведения рекомендуется включать метатег области просмотра.

Отображение настольных сайтов

В некоторых случаях вам может потребоваться отобразить контент, не предназначенный для мобильных устройств. Например, вы можете отображать контент, который вы не контролируете. В этом случае вы можете заставить WebView использовать область просмотра размером с рабочий стол:

Если эти методы не заданы и область просмотра не указана, WebView пытается установить ширину области просмотра в зависимости от размера контента.

Кроме того, вы можете использовать алгоритм макета TEXT_AUTOSIZING , который увеличивает размер шрифта, чтобы сделать его более читабельным на мобильном устройстве. См. setLayoutAlgorithm .

Используйте адаптивный дизайн

Адаптивный дизайн — это подход к разработке интерфейса, который меняется в зависимости от размера экрана.

Существует несколько способов реализации адаптивного дизайна. Одним из наиболее распространенных является запрос @media , который применяет CSS к элементам на основе характеристик устройства.

Например, предположим, что вы хотите перейти от вертикального макета к горизонтальному в зависимости от ориентации. Установите свойства CSS по умолчанию на портрет:

.page-container {
    display: -webkit-box;
    display: flex;

    -webkit-box-orient: vertical;
    flex-direction: column;

    padding: 20px;
    box-sizing: border-box;
}

Чтобы переключиться на горизонтальную компоновку, переключите свойство flex-direction в зависимости от ориентации:

@media screen and (orientation: landscape) {
  .page-container.notification-opened {
    -webkit-box-orient: horizontal;
    flex-direction: row;
  }

  .page-container.notification-opened > .notification-arrow {
    margin-right: 20px;
  }
}

Вы также можете изменить макет в зависимости от ширины экрана.

Например, можно изменить размер ширины кнопки со 100% до меньшего по мере увеличения физического размера экрана.

button {
  display: block;
  width: 100%;
  ...
}

@media screen and (min-width: 500px) {
  button {
    width: 60%;
  }
}

@media screen and (min-width: 750px) {
  button {
    width: 40%;
    max-width: 400px;
  }
}

Это незначительные изменения, но в зависимости от вашего пользовательского интерфейса медиа-запросы могут помочь вам внести гораздо большие изменения во внешний вид вашего приложения, сохранив при этом тот же HTML.

Четкие и ясные изображения

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

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

Используйте CSS для масштабируемых эффектов.
Используйте векторную графику.
Предоставьте фотографии в высоком разрешении.

Используйте CSS для масштабируемых эффектов

Используйте CSS, когда можете, вместо изображений. Возможно, рендеринг некоторых комбинаций свойств CSS может оказаться дорогостоящим. Всегда проверяйте конкретные комбинации, которые вы используете.

Узнайте больше о First Contentful Paint (FCP) , который измеряет время с момента первого перехода пользователя на страницу до момента отображения какой-либо части содержимого страницы на экране. «Содержимое» относится к тексту, изображениям (включая фоновые изображения), элементам <svg> и небелым элементам <canvas> .

Используйте векторную графику

Масштабируемая векторная графика (SVG) — отличный способ создать масштабируемое изображение. Для изображений, которые хорошо подходят для векторной графики, SVG предоставляет высококачественные изображения с очень небольшими размерами файлов.

Предоставьте фотографии в высоком разрешении

Используйте фотографию, подходящую для устройства с высоким разрешением, и масштабируйте изображение с помощью CSS. Таким образом, изображение может отображаться в высоком качестве на всех устройствах. Если при создании изображения вы используете высокое сжатие (низкое качество), вы можете добиться хороших визуальных результатов при разумном размере файла.

У этого подхода есть несколько потенциальных недостатков: сильно сжатые изображения могут показывать некоторые визуальные артефакты, поэтому вам нужно поэкспериментировать, чтобы определить, какой уровень сжатия вы считаете приемлемым. А изменение размера изображения в CSS может оказаться дорогостоящей операцией.

Если высокая степень сжатия вам не подходит, попробуйте формат WebP , который дает изображение высокого качества при относительно небольшом размере файла. Не забудьте предоставить запасной вариант для версий Android, в которых WebP не поддерживается.

Детальный контроль

Во многих случаях невозможно использовать одно изображение для всех устройств. В этом случае вы можете выбирать разные изображения в зависимости от размера и плотности экрана. Используйте медиа-запросы для выбора фоновых изображений по размеру и плотности экрана.

Вы можете использовать JavaScript для управления загрузкой изображений, но это добавляет сложности.

Медиа-запросы и плотность экрана

Чтобы выбрать изображение на основе плотности экрана, вам необходимо использовать в медиазапросе единицы dpi или dppx . Единица dpi представляет количество точек на дюйм CSS, а dppx — количество точек на пиксель CSS.

В следующей таблице вы можете увидеть связь между dpi и dppx .

Соотношение пикселей устройства	Обобщенная плотность экрана	Точек на CSS-дюйм ( `dpi` )	Точек на пиксель CSS ( `dppx` )
1x	МДПИ	96 `dpi`	1 `dppx`
1,5x	HDPI	144 `dpi`	1,5 `dppx`
2	XHDPI	192 `dpi`	2 `dppx`

Обобщенные сегменты плотности экрана определяются Android и используются в других местах для выражения плотности экрана (например, https://screensiz.es ).

Фоновые изображения

Вы можете использовать медиа-запросы для назначения фоновых изображений элементам. Например, если у вас есть изображение логотипа размером 256х256 пикселей на устройстве с соотношением пикселей 1,0, вы можете использовать следующие правила CSS:

.welcome-header > h1 {
  flex: 1;

  width: 100%;

  max-height: 256px;
  max-width: 256px;

  background-image: url('../images/html5_256x256.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

Чтобы заменить это изображение на изображение большего размера на устройствах с соотношением пикселей устройства 1,5 (hdpi) и 2,0 (xhdpi), вы можете добавить следующие правила:

@media screen and (min-resolution: 1.5dppx) {
  .welcome-header > h1{
    background-image: url('../images/html5_384x384.png');
  }
}

@media screen and (min-resolution: 2dppx) {
  .welcome-header > h1{
    background-image: url('../images/html5_512x512.png');
  }
}

Затем вы можете объединить этот метод с другими медиа-запросами, такими как min-width , что полезно, поскольку вы учитываете различные форм-факторы.

@media screen and (min-resolution: 2dppx) {
  .welcome-header > h1{
    background-image: url('../images/html5_512x512.png');
  }
}

@media screen and (min-resolution: 2dppx) and (min-width: 1000px) {
  .welcome-header > h1{
    background-image: url('../images/html5_1024x1024.png');

    max-height: 512px;
    max-width: 512px;
  }
}

Вы можете заметить, что max-height и max-width установлены на 512 пикселей для разрешения 2 ddpx с изображением 1024x1024 пикселей. это связано с тем, что «пиксель» CSS фактически учитывает соотношение пикселей устройства (512 пикселей * 2 = 1024 пикселей).

А как насчет `<img/>` ?

Сегодня в Интернете нет решения этой проблемы. Есть некоторые предложения, но они недоступны ни в текущих браузерах, ни в WebView.

Между тем, если вы генерируете свой DOM на JavaScript, вы можете создать несколько ресурсов изображений в продуманной структуре каталогов:

images/
  mdpi/
    imagename.png
  hdpi/
    imagename.png
  xhdpi/
    imagename.png

Затем используйте соотношение пикселей, чтобы попытаться получить наиболее подходящее изображение:

function getDensityDirectoryName() {
  if(!window.devicePixelRatio) {
    return 'mdpi';
  }

  if(window.devicePixelRatio > 1.5) {
    return 'xhdpi';
  } else if(window.devicePixelRatio > 1.0) {
    return 'hdpi';
  }

  return 'mdpi';
}

Альтернативно вы можете изменить базовый URL-адрес страницы, чтобы определить относительные URL-адреса для изображений.

<!doctype html>
<html class="no-js">
<head>
  <script>
    function getDensityDirectoryName() {
      if(!window.devicePixelRatio) {
          return 'mdpi';
      }

      if(window.devicePixelRatio > 1.5) {
          return 'xhdpi';
      } else if(window.devicePixelRatio > 1.0) {
          return 'hdpi';
      }

      return 'mdpi';
    }

    var baseUrl =
        'file:///android_asset/www/img-js-diff/ratiores/'+getDensityDirectoryName()+'/';
    document.write('<base href="'+baseUrl+'">');
  </script>

    ...
</head>
<body>
    ...
</body>
</html>

Этот подход блокирует загрузку страницы и принудительно использует абсолютные пути для всех ресурсов, таких как изображения, сценарии и файлы CSS, поскольку базовый URL-адрес указывает на каталог с определенной плотностью.