Sprawdzone metody dotyczące aplikacji internetowych
Zadbaj o dobrą organizację dzięki kolekcji
Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
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.
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.
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:
<!DOCTYPEhtml>
...
<metacharset="UTF-8">
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:
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ę.
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
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.
Treść strony i umieszczone na niej fragmenty kodu podlegają licencjom opisanym w Licencji na treści. Java i OpenJDK są znakami towarowymi lub zastrzeżonymi znakami towarowymi należącymi do firmy Oracle lub jej podmiotów stowarzyszonych.
Ostatnia aktualizacja: 2025-07-27 UTC.
[[["Łatwo zrozumieć","easyToUnderstand","thumb-up"],["Rozwiązało to mój problem","solvedMyProblem","thumb-up"],["Inne","otherUp","thumb-up"]],[["Brak potrzebnych mi informacji","missingTheInformationINeed","thumb-down"],["Zbyt skomplikowane / zbyt wiele czynności do wykonania","tooComplicatedTooManySteps","thumb-down"],["Nieaktualne treści","outOfDate","thumb-down"],["Problem z tłumaczeniem","translationIssue","thumb-down"],["Problem z przykładami/kodem","samplesCodeIssue","thumb-down"],["Inne","otherDown","thumb-down"]],["Ostatnia aktualizacja: 2025-07-27 UTC."],[],[],null,["# Best practices for web apps\n\nDeveloping web pages and applications for mobile devices presents different challenges compared\nto developing a web page for desktop web browsers. The following practices can help you provide the\nmost effective web application for Android and other mobile devices.\n\n1. **Redirect mobile devices to a dedicated mobile version of your website.** There are several ways to do this using server-side redirects. One common method is to \"sniff\" the User Agent string provided by the web browser. To determine whether to serve a mobile version of your site, look for the \"mobile\" string in the User Agent.\n| **Note:** Large-screen Android-powered devices that are served full-size websites---such as tablets---don't include the \"mobile\" string in the User Agent, while the rest of the User Agent string is mostly the same. As such, it's important you deliver the mobile version of your website based on whether the \"mobile\" string exists in the User Agent.\n2. **Use [HTML5](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5)\n for mobile devices.** HTML5 is the most common markup language used for mobile websites. This standard encourages mobile-first development to help ensure that websites work on a variety of devices. Unlike previous web languages, HTML5 uses simpler `\u003cDOCTYPE\u003e` and `charset` declarations: \n\n ```xml\n \u003c!DOCTYPE html\u003e\n ...\n \u003cmeta charset=\"UTF-8\"\u003e\n ```\n3. **Use viewport metadata to properly resize your web page.** In your document `\u003chead\u003e`, provide metadata that specifies how you want the browser's viewport to render your web page. For example, your viewport metadata can specify the height and width for the browser's viewport, the initial page scale, and the target screen density.\n\n The following example shows how to set viewport metadata: \n\n ```xml\n \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\"\u003e\n ```\n\n For more information about how to use viewport metadata for Android-powered devices, read [Support different screens in web apps](/guide/webapps/targeting).\n4. **Use a vertical linear layout.** Avoid the need for the user to scroll left and right while navigating your page. Scrolling up and down is easier for the user and makes your page simpler.\n5. **Set the layout height and width to `match_parent`.** Setting your [`WebView`](/reference/android/webkit/WebView) object's height and width to `match_parent` makes sure your app's views are sized correctly. We discourage setting the height to `wrap_content` because it results in incorrect sizing. Similarly, setting the layout width to `wrap_content` isn't supported and causes your `WebView` to use the width of its parent instead. Because of this behavior, it's also important to make sure none of your `WebView` object's parent layout objects have their height and width set to `wrap_content`.\n6. **Avoid multiple file requests.** Because mobile devices typically have a connection speed slower than desktop computers, make your page load as fast as possible. One way to speed it up is to avoid loading extra files such as stylesheets and script files in the `\u003chead\u003e`. Also, consider [performing mobile analysis with\n Google's PageSpeed Insights](https://developers.google.com/speed/docs/insights/v5/get-started) for detailed optimization suggestions specific to your app.\n\nAdditional resources\n--------------------\n\n- [Pixel-Perfect UI in the WebView](https://developers.google.com/chrome/mobile/docs/webview/pixelperfect)\n- [Learn Responsive Design](http://www.html5rocks.com/en/mobile/responsivedesign/)\n- [High DPI images for variable pixel densities](http://www.html5rocks.com/en/mobile/high-dpi/)\n- [Mobile Web Best Practices](http://www.w3.org/TR/mobile-bp/)\n- [Make the Web Faster](https://developers.google.com/speed/overview)"]]
