WebView w każdym pikselu

Data publikacji: 28 lutego 2014 r.

Istnieje kilka opcji, które umożliwiają tworzenie idealnego interfejsu dla WebView.

Ustaw metatag viewport

Metatag viewport to jeden z najważniejszych tagów, które należy dodać do aplikacji internetowej. Bez niego WebView może działać tak, jakby Twoja witryna była przeznaczona do przeglądarek na komputery. W efekcie strona internetowa ma większą szerokość (zazwyczaj 980 pikseli) i jest skalowana, aby pasowała do szerokości WebView. W większości przypadków powoduje to wyświetlenie małej wersji strony, która wymaga od użytkownika przesunięcia i powiększenia, aby można było przeczytać tekst.

Jeśli chcesz, aby szerokość witryny odpowiadała 100% szerokości WebView, ustaw metatag viewport:

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

Aby zyskać większą kontrolę nad układem strony, ustaw wartość szerokości na wartość specjalną device-width.

Domyślnie WebView ustawia widoczny obszar na „device-width”, a nie na „desktop”. Jednak aby zapewnić niezawodne i kontrolowane działanie, warto umieścić metatag viewport.

Wyświetlanie witryn na komputery

W niektórych przypadkach może być konieczne wyświetlanie treści nieprzeznaczonych dla urządzeń mobilnych. Możesz na przykład wyświetlać treści, nad którymi nie masz kontroli. W takim przypadku możesz zmusić WebView do użycia widocznego obszaru o rozmiarze ekranu komputera:

• setUseWideViewPort(true)
• setLoadWithOverviewMode(true)

Jeśli te metody nie są ustawione inie jest określony widoczny obszar, WebView próbuje ustawić szerokość widocznego obszaru na podstawie rozmiaru treści.

Możesz też użyć algorytmu układu TEXT_AUTOSIZING, który zwiększa rozmiar czcionki, aby ułatwić czytanie na urządzeniu mobilnym. Zobacz setLayoutAlgorithm.

Elastyczne projektowanie stron

Elastyczne projektowanie stron to podejście do projektowania interfejsu, które zmienia się w zależności od rozmiaru ekranu.

Istnieje kilka sposobów na wdrożenie strony responsywnej. Jednym z najczęstszych jest zapytanie @media, które stosuje CSS do elementów na podstawie cech urządzenia.

Załóżmy na przykład, że chcesz zmienić układ pionowy na poziomy w zależności od orientacji. Ustaw domyślne właściwości CSS na orientację pionową:

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

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

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

Aby przełączyć się na układ poziomy, zmień właściwość flex-direction w zależności od orientacji:

@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;
  }
}

Możesz też zmienić układ w zależności od szerokości ekranu.

Możesz na przykład dostosować rozmiar przycisku z 100% do mniejszego, gdy fizyczny rozmiar ekranu się zwiększa.

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

Są to niewielkie zmiany, ale w zależności od interfejsu użytkownika za pomocą zapytań o multimedia możesz wprowadzić znacznie większe zmiany w wyglądzie aplikacji, zachowując ten sam kod HTML.

Wskazówka: zamiast skupiać się na rozmiarach urządzeń, staraj się zmieniać interfejs na podstawie szerokości, gdy komponent zaczyna wyglądać nie na swoim miejscu. Dzięki temu Twoja aplikacja będzie wyglądać świetnie na różnych urządzeniach, a nie tylko na tych, na których ją testujesz. Możesz to przetestować w trybie urządzenia w Narzędziach deweloperskich.

ostre i wyraźne obrazy;

Różne rozmiary i gęstości ekranów również stanowią wyzwanie dla obrazów. Mniejsze obrazy wymagają mniej pamięci i wczytują się szybciej, ale są niewyraźne, gdy je powiększysz.

Oto kilka wskazówek i porad, które pomogą Ci zadbać o ostre i wyraźne obrazy na dowolnym ekranie:

• Używaj CSS do efektów skalowanych.
• Używaj grafiki wektorowej.
• Przesyłaj zdjęcia w wysokiej rozdzielczości.

Używanie CSS do efektów skalowanych

Zamiast obrazów używaj CSS-u. Renderowanie niektórych kombinacji właściwości CSS może być kosztowne. Zawsze testuj konkretne kombinacje, których używasz.

Dowiedz się więcej o pierwszym wyrenderowaniu treści (FCP), które mierzy czas od momentu, gdy użytkownik po raz pierwszy wyświetlił stronę, do momentu wyrenderowania dowolnej części treści strony na ekranie. „Treści” to tekst, obrazy (w tym obrazy tła), elementy <svg> i elementy <canvas>, które nie są białe.

Używaj grafiki wektorowej

Scalawalna grafika wektorowa (SVG) to świetny sposób na udostępnienie skalowanego obrazu. W przypadku obrazów, które dobrze nadają się do grafiki wektorowej, format SVG zapewnia obrazy wysokiej jakości o bardzo małym rozmiarze pliku.

Przesyłanie zdjęć w wysokiej rozdzielczości

Użyj zdjęcia odpowiedniego dla urządzenia o wysokiej rozdzielczości i skaluj je za pomocą CSS. Dzięki temu obraz może być renderowany w wysokiej jakości na różnych urządzeniach. Jeśli podczas generowania obrazu użyjesz wysokiej kompresji (ustawienia niskiej jakości), możesz uzyskać dobre efekty wizualne przy rozsądnym rozmiarze pliku.

Takie podejście ma kilka potencjalnych wad: bardzo skompresowane obrazy mogą zawierać artefakty wizualne, więc musisz eksperymentować, aby określić, jakie skompresowanie jest dla Ciebie do przyjęcia. Zmiana rozmiaru obrazu w CSS może być kosztowna.

Jeśli wysoka kompresja nie odpowiada Twoim potrzebom, spróbuj użyć formatu WebP, który zapewnia wysoką jakość obrazu przy stosunkowo małym rozmiarze pliku. Pamiętaj, aby zapewnić wersję zapasową dla wersji Androida, które nie obsługują formatu WebP.

Szczegółowa kontrola

W wielu przypadkach nie można użyć jednego obrazu na wszystkich urządzeniach. W takim przypadku możesz wybrać różne obrazy w zależności od rozmiaru i gęstości ekranu. Używaj zapytań dotyczących multimediów, aby wybierać obrazy tła na podstawie rozmiaru i gęstości ekranu.

Możesz kontrolować sposób wczytywania obrazów za pomocą JavaScriptu, ale spowoduje to zwiększenie złożoności.

Zapytania multimedialne i gęstość ekranu

Aby wybrać obraz na podstawie gęstości ekranu, musisz użyć w zapytaniu o multimedia jednostek dpi lub dppx. Jednostka dpi oznacza kropki na cal w usługach porównywania cen, a dppx – kropki na piksel w usługach porównywania cen.

W tabeli poniżej możesz zobaczyć relację między dpi a dppx.

Współczynnik pikseli urządzenia	Ogólna gęstość ekranu	Punkty na cal w układzie CSS (dpi)	Punkty na piksel CSS (dppx)
1x	MDPI	96dpi	1dppx
1,5x	HDPI	144dpi	1,5dppx
2	XHDPI	192dpi	2dppx

Uogólnione zbiory gęstości ekranu są definiowane przez Androida i służą do wyrażania gęstości ekranu w innych miejscach (np. https://screensiz.es).

Obrazy tła

Za pomocą zapytań o multimedia możesz przypisywać obrazy tła do elementów. Jeśli na przykład masz obraz logo o rozmiarze 256 pikseli na 256 pikseli na urządzeniu o współczynniku pikseli 1,0, możesz użyć tych reguł 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;
}

Aby zastąpić go większym obrazem na urządzeniach o współczynniku pikseli 1,5 (hdpi) i 2,0 (xhdpi), możesz dodać te reguły:

@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');
  }
}

Następnie możesz połączyć tę technikę z innymi zapytaniami dotyczącymi multimediów, takimi jak min-width, co jest przydatne, gdy uwzględniasz różne formaty.

@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;
  }
}

Możesz zauważyć, że wartości max-height i max-width są ustawione na 512 pikseli w rozdzielczości 2ddpx, a obraz ma wymiary 1024 x 1024 piksele. Dzieje się tak, ponieważ „piksel” w CSS uwzględnia współczynnik pikseli urządzenia (512 pikseli * 2 = 1024 piksele).

A <img/>?

Obecnie w internecie nie ma rozwiązania tego problemu. Istnieją pewne propozycje, ale nie są one dostępne w bieżących przeglądarkach ani w WebView.

Jeśli generujesz DOM w JavaScript, możesz utworzyć wiele zasobów obrazu w przemyślanej strukturze katalogu:

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

Następnie użyj współczynnika proporcji pikseli, aby wybrać najbardziej odpowiedni obraz:

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

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

  return 'mdpi';
}

Możesz też zmienić podstawowy adres URL strony, aby zdefiniować względne adresy URL zdjęć.

<!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>

Takie podejście blokuje wczytywanie strony i wymaga stosowania ścieżek bezwzględnych dla wszystkich zasobów, takich jak obrazy, skrypty i pliki CSS, ponieważ adres URL podstawowy wskazuje katalog dotyczący określonej gęstości.