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:
- Doskonały interfejs dla Pixela w komponencie WebView
- Naucz się projektowania responsywnego
- Obrazy w wysokiej rozdzielczości dla zmiennej gęstości pikseli
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"); }