Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Mengembangkan halaman web dan aplikasi untuk perangkat seluler menghadirkan tantangan yang berbeda dibandingkan
untuk mengembangkan laman web
untuk {i>browser<i} web desktop. Praktik berikut dapat membantu Anda menyediakan
aplikasi web yang paling efektif untuk
Android dan perangkat seluler lainnya.
Alihkan perangkat seluler ke situs versi seluler khusus. Ada beberapa
untuk melakukannya menggunakan pengalihan sisi server. Salah satu metode yang umum adalah dengan "mengendus" tindakan
String Agen Pengguna yang disediakan oleh browser web. Untuk menentukan
apakah akan menayangkan versi seluler situs Anda, cari "seluler" di Agen Pengguna.
Menggunakan HTML5
untuk perangkat seluler. HTML5 adalah bahasa markup yang paling umum digunakan untuk situs seluler.
Standar ini mendorong pengembangan {i>mobile-first <i}untuk membantu memastikan bahwa situs web berfungsi pada berbagai
perangkat. Tidak seperti bahasa web sebelumnya, HTML5 menggunakan <DOCTYPE> yang lebih sederhana dan
Pernyataan charset:
<!DOCTYPEhtml>
...
<metacharset="UTF-8">
Gunakan metadata area pandang untuk mengubah ukuran halaman web dengan benar. Dalam dokumen Anda
<head>, menyediakan metadata yang menentukan bagaimana Anda ingin area pandang browser
merender laman web Anda. Misalnya, metadata area pandang Anda bisa menentukan tinggi dan lebar untuk
area pandang browser, skala halaman awal, dan kepadatan layar target.
Contoh berikut menunjukkan cara menetapkan metadata area pandang:
Gunakan tata letak linear vertikal. Hindari keharusan pengguna untuk
men-scroll ke kiri dan ke kanan saat
menavigasi halaman. Scroll ke atas dan ke bawah lebih mudah bagi pengguna dan membuat halaman Anda lebih sederhana.
Tetapkan tinggi dan lebar tata letak ke match_parent. Menyetel
WebView tinggi dan lebar objek untuk
match_parent memastikan tampilan aplikasi Anda memiliki ukuran yang tepat. Sebaiknya jangan menetapkan
tinggi dengan wrap_content karena menyebabkan kesalahan ukuran. Demikian pula, menentukan
lebar tata letak menjadi wrap_content tidak didukung dan menyebabkan WebView
menggunakan lebar induknya. Karena perilaku ini, penting
untuk memastikan tidak ada
objek tata letak induk objek WebView Anda memiliki tinggi dan lebar yang ditetapkan ke
wrap_content.
Hindari banyak permintaan file. Karena perangkat seluler umumnya
memiliki kecepatan koneksi
lebih lambat dibandingkan komputer desktop, buat laman Anda dimuat secepat mungkin. Salah satu cara untuk
mempercepatnya adalah dengan
hindari memuat file tambahan seperti stylesheet dan file skrip di <head>.
Pertimbangkan juga
melakukan analisis seluler dengan
PageSpeed Insights dari Google guna memberikan saran pengoptimalan mendetail khusus untuk aplikasi Anda.
Konten dan contoh kode di halaman ini tunduk kepada lisensi yang dijelaskan dalam Lisensi Konten. Java dan OpenJDK adalah merek dagang atau merek dagang terdaftar dari Oracle dan/atau afiliasinya.
Terakhir diperbarui pada 2025-07-27 UTC.
[null,null,["Terakhir diperbarui pada 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)"]]
