Obsługa różnych ekranów w aplikacjach internetowych

Ponieważ Android jest dostępny na urządzeniach z różnymi rozmiarami ekranu i gęstością pikseli, weź pod uwagę te czynniki w swoim projekcie stron, aby dopasować rozmiar stron. WebView obsługuje funkcje DOM, CSS i metatagi, które ułatwiają prawidłowe renderowanie treści internetowych.

Podczas kierowania na strony internetowe na urządzenia z Androidem musisz wziąć pod uwagę 2 główne czynniki:

widoczny obszar
Widoczny obszar to prostokątny obszar, który stanowi rysowalny obszar strony internetowej. Możesz określić kilka właściwości widocznego obszaru, np. jego rozmiar i początkową skalę. Najważniejsza jest szerokość widocznego obszaru, która określa łączną liczbę pikseli CSS dostępnych z perspektywy strony internetowej.
Gęstość ekranu
Klasa WebView i większość przeglądarek internetowych na urządzeniach z Androidem konwertują wartości pikseli CSS na wartości w pikselach niezależne od gęstości. Dzięki temu Twoja strona internetowa ma taki sam widoczny rozmiar jak ekran o średniej gęstości – około 160 dpi. Jeśli jednak grafika jest ważnym elementem projektu strony, zwróć uwagę na skalowanie, które następuje przy różnych gęstościach. Na przykład obraz o szerokości 300 pikseli na ekranie o rozdzielczości 320 dpi jest skalowany w górę – zużywa więcej pikseli fizycznych na piksel CSS. Może to powodować powstawanie artefaktów, takich jak rozmycie i pikselizacja. Dla uproszczenia Android grupuje większość mniejszych ekranów w kilka ogólnych kategorii: mały, średni i duży. Więcej informacji o gęstości ekranu znajdziesz w artykule Obsługa różnych gęstości pikseli.

Zapoznaj się z tymi powiązanymi materiałami:

Określanie właściwości widocznego obszaru

Widoczny obszar to obszar, w którym rysowana jest strona internetowa. Mimo że całkowity widoczny obszar widocznego obszaru jest taki sam jak rozmiar ekranu po maksymalnym powiększeniu, ma on własne wymiary w pikselach, które udostępnia stronie. Na przykład chociaż ekran urządzenia może mieć fizyczną szerokość 480 pikseli, widoczny obszar może mieć szerokość 800 pikseli. Dzięki temu strona internetowa projektu o szerokości 800 pikseli jest w pełni widoczna na ekranie, gdy skala widocznego obszaru wynosi 1,0.

Większość przeglądarek na urządzeniach z Androidem (w tym Chrome) domyślnie ustawia duży rozmiar widocznego obszaru. Ten _panoramiczny tryb widocznego obszaru_ ma około 980 pikseli szerokości. Wiele przeglądarek domyślnie pomniejsza widok tak daleko, jak to możliwe, i pokazuje pełną szerokość widocznego obszaru, czyli _overview mode_.

Za pomocą tagu <meta name="viewport" ...> w dokumencie możesz zdefiniować właściwości widocznego obszaru strony internetowej, takie jak szerokość i początkowy poziom powiększenia.<head>

Poniższa składnia przedstawia wszystkie obsługiwane właściwości widocznego obszaru oraz typy wartości akceptowanych przez każdą z nich:

<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"]
          " />

Na przykład ten tag <meta> określa, że szerokość widocznego obszaru odpowiada szerokości ekranu urządzenia, a możliwość powiększania jest wyłączona:

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

Optymalizując witrynę pod kątem urządzeń mobilnych, zwykle ustawiasz szerokość na "device-width", aby rozmiar pasował dokładnie do wszystkich urządzeń. Następnie za pomocą zapytań o multimedia CSS możesz elastycznie dostosowywać układy do różnych rozmiarów ekranu.

Docelowa gęstość urządzeń za pomocą CSS

WebView obsługuje -webkit-device-pixel-ratio, czyli funkcję multimediów CSS, która umożliwia tworzenie stylów odpowiednio do określonej gęstości ekranu. Wartość, którą zastosujesz do tej funkcji, musi wynosić 0,75, 1 lub 1,5, aby wskazać, że styl dotyczy odpowiednio urządzeń z ekranami o małej, średniej i dużej gęstości.

Dla każdej gęstości możesz utworzyć osobne arkusze stylów:

<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" />

Możesz też określić różne style w jednym arkuszu stylów:

#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);
    }
}

Więcej informacji o obsłudze różnych gęstości ekranu, zwłaszcza obrazów, znajdziesz w artykule Obrazy w wysokiej rozdzielczości dla zmiennej gęstości pikseli.

Docelowa gęstość urządzeń za pomocą JavaScriptu

WebView obsługuje window.devicePixelRatio, czyli właściwość DOM, która umożliwia wysyłanie zapytań dotyczących gęstości bieżącego urządzenia. Wartość tej właściwości określa współczynnik skalowania używany w bieżącym urządzeniu. Jeśli wartość window.devicePixelRatio wynosi 1,0, urządzenie jest uznawane za urządzenie o średniej gęstości, a domyślnie nie jest stosowane skalowanie. Jeśli wartość wynosi 1,5, urządzenie jest uznawane za urządzenie o dużej gęstości, a strona jest domyślnie przeskalowana do 1,5x. Jeśli wartość to 0,75, urządzenie jest uznawane za urządzenie o niskiej gęstości, a domyślnie strona jest skalowana w zakresie 0,75x.

Skalowanie stosowane przez przeglądarkę Androida i WebView zależy od docelowej gęstości strony internetowej. Jak opisano w sekcji dotyczącej definiowania gęstości widocznego obszaru, domyślną wartością docelową jest średnia gęstość, ale możesz zmienić ten cel, aby wpłynąć na skalowanie strony internetowej pod kątem różnych gęstości ekranu.

Na przykład w ten sposób możesz wysłać zapytanie o gęstość urządzeń za pomocą kodu 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");
}