Sprawdzone metody dotyczące aplikacji internetowych

Tworzenie stron internetowych i aplikacji na urządzenia mobilne wiąże się z innymi wyzwaniami niż w przypadku do tworzenia stron internetowych do przeglądarek na komputer. Podane niżej metody mogą pomóc w dostarczeniu najskuteczniejsza aplikacja internetowa na Androida i inne urządzenia mobilne.

  1. Przekierowuj urządzenia mobilne do dedykowanej mobilnej wersji swojej witryny. Dostępnych jest kilka możesz to zrobić za pomocą przekierowań po stronie serwera. Jedną z popularnych metod jest wąchanie Ciąg znaków klienta użytkownika podany przez przeglądarkę. Aby określić czy wyświetlać mobilną wersję witryny, poszukaj w sekcji „Mobilne” w polu klienta użytkownika.
  2. Używaj HTML5 na urządzeniach mobilnych. HTML5 to najpopularniejszy język znaczników stosowany w witrynach mobilnych. Ten standard zachęca do programowania zoptymalizowanego pod kątem urządzeń mobilnych, dzięki czemu witryny mogą działać na różnych urządzenia. W przeciwieństwie do poprzednich języków internetowych HTML5 wykorzystuje prostsze <DOCTYPE> i Deklaracje charset: 
    <!DOCTYPE html>
...
<meta charset="UTF-8">
  3. Użyj metadanych widocznego obszaru, aby odpowiednio zmienić rozmiar strony. W dokumencie <head>, podaj metadane określające, jak ma wyglądać widoczny obszar przeglądarki wyrenderuj swoją stronę internetową. Na przykład metadane widocznego obszaru mogą określać wysokość i szerokość elementu widoczny obszar przeglądarki, początkowa skala strony i docelowa gęstość ekranu.

    Ten przykład pokazuje, jak ustawić metadane widocznego obszaru:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    Więcej informacji o korzystaniu z metadanych widocznego obszaru na urządzeniach z Androidem znajdziesz w artykule Obsługa różnych ekranów w aplikacjach internetowych.

  4. Użyj pionowego układu liniowego. Unikaj przewijania strony w lewo i w prawo poruszanie się po stronie. Przewijanie w górę i w dół jest łatwiejsze dla użytkownika i upraszcza stronę.
  5. Ustaw wysokość i szerokość układu na match_parent. Ustawiam WebView wysokości i szerokości obiektu do match_parent dba o prawidłową wielkość wyświetleń Twojej aplikacji. Odradzamy ustawianie wysokość do wrap_content, ponieważ powoduje to nieprawidłowy rozmiar. Podobnie ustawienie parametru szerokość układu do wrap_content nie jest obsługiwana i powoduje, że WebView użyj szerokości elementu nadrzędnego. Z tego względu ważne jest, aby nie wysokość i szerokość obiektów układu nadrzędnego Twojego obiektu WebView jest ustawiona na wrap_content
  6. Unikaj wielu próśb o przesłanie plików. Ponieważ urządzenia mobilne zwykle mają szybkie połączenie z internetem, wolniejsze niż komputery, więc strona może wczytywać się jak najszybciej. Jednym ze sposobów na przyspieszenie unikaj wczytywania w programie <head> dodatkowych plików, takich jak arkusze stylów i pliki skryptów. Warto także rozważyć na temat analizy mobilnej Google PageSpeed Insights zawiera szczegółowe sugestie optymalizacji dotyczące Twojej aplikacji.

Dodatkowe materiały