Projektowanie stron i aplikacji na urządzenia mobilne wiąże się z innymi wyzwaniami niż tworzenie stron internetowych na potrzeby przeglądarek na komputerach. Poniższe metody pomogą Ci stworzyć najskuteczniejszą aplikację internetową na Androida i inne urządzenia mobilne.
- Przekierowuj urządzenia mobilne do dedykowanej mobilnej wersji swojej witryny. Możesz to zrobić na kilka sposobów, korzystając z przekierowań po stronie serwera. Jedną z popularnych metod jest „wsłuchiwanie” się w ciąg znaków klienta użytkownika dostarczony przez przeglądarkę. Aby sprawdzić, czy wyświetlać witrynę w wersji mobilnej, w kliencie użytkownika znajdź ciąg znaków „mobile”.
- W przypadku urządzeń mobilnych używaj HTML5. HTML5 to najpopularniejszy język znaczników w witrynach mobilnych.
Ten standard zachęca do programowania głównie na urządzeniach mobilnych, by zapewnić, że witryny będą działać na różnych urządzeniach. W przeciwieństwie do poprzednich języków stron HTML5 używa prostszych deklaracji
<DOCTYPE>
icharset
:<!DOCTYPE html> ... <meta charset="UTF-8">
- Używaj metadanych widocznego obszaru, aby odpowiednio zmieniać rozmiar strony internetowej. W dokumencie
<head>
podaj metadane określające sposób, w jaki widoczny obszar przeglądarki ma renderować Twoją stronę internetową. Na przykład metadane widocznego obszaru mogą określać wysokość i szerokość widocznego obszaru w przeglądarce, początkową skalę strony i docelowe gęstość ekranu.Poniższy 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 używaniu metadanych widocznego obszaru na urządzeniach z Androidem znajdziesz w artykule Obsługa różnych ekranów w aplikacjach internetowych.
- Użyj pionowego układu liniowego. Dzięki temu użytkownik nie musi przewijać strony w lewo i w prawo. Przewijanie w górę i w dół jest dla użytkownika łatwiejsze i prostsze.
- Ustaw wysokość i szerokość układu na
match_parent
. Ustawienie wysokości i szerokości obiektuWebView
namatch_parent
zapewnia poprawny rozmiar widoków w aplikacji. Odradzamy ustawianie wysokości nawrap_content
, ponieważ powoduje to nieprawidłowe ustawienie rozmiaru. Podobnie ustawienie szerokości układu nawrap_content
nie jest obsługiwane i sprawia, żeWebView
korzysta z szerokości swojego elementu nadrzędnego. Z tego powodu musisz się też upewnić, że żaden z nadrzędnych obiektów układu obiektuWebView
nie ma wysokości ani szerokości ustawionego nawrap_content
. - Unikaj wielu próśb o przesłanie plików. Urządzenia mobilne zwykle mają wolniejsze połączenie niż komputery, dlatego zadbaj o to, aby strona wczytywała się tak szybko, jak to możliwe. Jednym ze sposobów przyspieszenia tego działania jest unikanie wczytywania w
<head>
dodatkowych plików, takich jak arkusze stylów i pliki skryptów. Możesz też przeprowadzić analizę witryny pod kątem urządzeń mobilnych za pomocą narzędzia Google PageSpeed Insights, aby uzyskać szczegółowe sugestie optymalizacji dotyczące Twojej aplikacji.
Dodatkowe materiały
- Doskonały interfejs dla Pixela w komponencie WebView
- Naucz się elastycznego projektowania stron
- Obrazy w wysokiej rozdzielczości dla zmiennej gęstości pikseli
- Internet mobilny – sprawdzone metody
- Przyspieszanie działania internetu