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

Android jest dostępny na urządzeniach o różnych rozmiarach ekranu i gęstości pikseli, uwzględnić te czynniki w projekcie witryny i dostosować jej rozmiar. WebView obsługuje DOM, CSS i metatag funkcje ułatwiające odpowiednie wyświetlanie treści z internetu.

Przy kierowaniu stron internetowych na urządzenia z systemem Android należy wziąć pod uwagę dla:

Widoczny obszar
Widoczny obszar to prostokątny obszar, w którym możesz rysować na stronie internetowej. Ty może określać kilka właściwości widocznego obszaru, np. jego rozmiar i skalę początkową. Najważniejszy jest szerokość widocznego obszaru, która określa łączną liczbę poziomych pikseli dostępnych na stronie z punktu widzenia – liczba dostępnych pikseli CSS.
Gęstość ekranu
Klasa WebView i większość przeglądarek internetowych na Androidzie konwertuje wartości pikseli CSS do wartości pikseli niezależnych od gęstości, dzięki czemu strona internetowa ekran o średniej gęstości – około 160 dpi. Jeśli jednak grafika jest istotnym elementem projektowania witryn, zwróć uwagę na skalowanie występujące w różnych gęstościach. Na przykład obraz czyli 300 pikseli szerokości na ekranie o rozdzielczości 320 dpi, jest skalowana w górę – używa więcej pikseli fizycznych na kod CSS. piksel. Może to powodować powstawanie artefaktów takich jak rozmycie czy pikselizacja. Dla uproszczenia Android zwija się różne mniejsze gęstości ekranu na kilka kategorii ogólnych: mały, średni i duży. Aby się uczyć więcej o gęstości ekranu, przeczytaj 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 Twoja strona internetowa. Chociaż cały widoczny obszar po maksymalnym powiększeniu obszar odpowiada rozmiarowi ekranu, a widoczny obszar ma własny piksel. dostępnych dla strony internetowej. Na przykład chociaż ekran urządzenia może przy fizycznej szerokości 480 pikseli, widoczny obszar może też mieć szerokość 800 pikseli. Dzięki temu strona internetowa zaprojektowany o szerokości 800 pikseli jest w pełni widoczny na ekranie, gdy skala widocznego obszaru wynosi 1,0.

Większość w przeglądarkach na urządzeniach z Androidem – w tym w Chrome – domyślnie ustaw widoczny obszar na duży rozmiar. Ten _tryb widocznego obszaru_ ma około 980 pikseli szerokości. Wiele przeglądarek oddala widok nawet to możliwe, aby wyświetlał się pełną szerokość widocznego obszaru, czyli _overview mode_ [tryb_przeglądu].

Możesz zdefiniować właściwości widocznego obszaru strony internetowej, takie jak szerokość i początkowe powiększenie za pomocą tagu <meta name="viewport" ...> w dokumencie. <head>

Ta składnia przedstawia wszystkie obsługiwane właściwości widocznego obszaru i typy wartości. akceptowane 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 tag <meta> wskazuje, że szerokość widocznego obszaru pasuje szerokości ekranu urządzenia i wyłączonej możliwości powiększenia:

<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 na wszystkich urządzeniach, a następnie użyj zapytań o media CSS, aby dostosowywać układy do różnych rozmiarów ekranu.

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

WebView obsługuje nośnik -webkit-device-pixel-ratio, który jest medium CSS Ta funkcja pozwala tworzyć style dla określonych gęstości ekranu. Wartość, którą zastosujesz do tej wartości musi wynosić 0,75, 1 lub 1,5, aby wskazać, że style są przeznaczone dla urządzeń o niskim, średnim lub średnim poziomie ważności i ekranach o 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 na temat obsługi różnych gęstości ekranu, a zwłaszcza obrazów, znajdziesz w artykule Obrazy o wysokiej rozdzielczości DPI dla zmiennej gęstości pikseli.

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

WebView obsługuje właściwość window.devicePixelRatio, czyli właściwość DOM, umożliwia zapytanie o gęstość obecnego urządzenia. Wartość tej właściwości określa skalowanie używany na obecnym urządzeniu. Jeśli wartość funkcji window.devicePixelRatio to 1,0, wtedy urządzenie jest uznawane za urządzenie o średniej gęstości i domyślnie nie jest stosowane skalowanie. Jeśli wynosi 1,5, wówczas urządzenie jest uznawane za urządzenie o dużej gęstości, a strona jest skalowana 1,5x wartość domyślną. Jeśli wartość to 0,75, urządzenie jest uznawane za urządzenie o małej gęstości, a strona jest skalowane domyślnie na 0,75x.

Skalowanie, które stosuje przeglądarka na Androida i element WebView, jest oparte na docelową gęstością reklam. Jak opisano w sekcji Definiowanie widocznego obszaru gęstość kierowania, domyślnym celem jest średnia gęstość, ale możesz zmienić tę wartość sposób skalowania strony internetowej pod kątem różnych gęstości ekranu.

Aby na przykład wysłać zapytanie o gęstość urządzeń za pomocą JavaScriptu:

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