Developing web pages and applications for mobile devices presents different challenges compared
to developing a web page for desktop web browsers. The following practices can help you provide the
most effective web application for Android and other mobile devices.

1. **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.

> [!NOTE]
> **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.

2. **Use [HTML5](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5)
   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 `<DOCTYPE>` and `charset` declarations:

   ```xml
   <!DOCTYPE html>
   ...
   <meta charset="UTF-8">
   ```
3. **Use viewport metadata to properly resize your web page.** In your document `<head>`, 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.

   The following example shows how to set viewport metadata:

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

   For more information about how to use viewport metadata for Android-powered devices, read [Support different screens in web apps](https://developer.android.com/guide/webapps/targeting).
4. **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.
5. **Set the layout height and width to `match_parent`.** Setting your [`WebView`](https://developer.android.com/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`.
6. **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 `<head>`. Also, consider [performing mobile analysis with
   Google's PageSpeed Insights](https://developers.google.com/speed/docs/insights/v5/get-started) for detailed optimization suggestions specific to your app.
7. **Disable automatic favicon downloads if you don't need them.** By default, `WebView` automatically downloads a favicon whenever a site is visited upon navigation. `WebView` keeps two copies of each downloaded favicon (one in Java and one in native memory), so disabling favicon downloads saves memory (approximately 8 KB per `WebView` instance) and reduces bandwidth consumption. If your app doesn't use or display favicons, use [`WebSettingsCompat.setDownloadFaviconsEnabled()`](https://developer.android.com/reference/androidx/webkit/WebSettingsCompat#setDownloadFaviconsEnabled(android.webkit.WebSettings,boolean)) from the [Jetpack Webkit](https://developer.android.com/reference/androidx/webkit/package-summary) library to disable automatic downloads:

   ### Kotlin

   ```kotlin
   // In this example, "myWebView" is an instance of WebView.
   if (WebViewFeature.isFeatureSupported(WebViewFeature.DOWNLOAD_FAVICONS_ENABLED)) {
       WebSettingsCompat.setDownloadFaviconsEnabled(myWebView.settings, false)
   }
   ```

   ### Java

   ```java
   // In this example, "myWebView" is an instance of WebView.
   if (WebViewFeature.isFeatureSupported(WebViewFeature.DOWNLOAD_FAVICONS_ENABLED)) {
       WebSettingsCompat.setDownloadFaviconsEnabled(myWebView.getSettings(), false);
   }
   ```
8. **Manage saved state and avoid transaction limits.** If you save your `WebView` state during lifecycle events using `saveState(Bundle)`, enforce payload size limits using [`WebViewCompat.saveState()`](https://developer.android.com/reference/androidx/webkit/WebViewCompat#saveState(android.webkit.WebView,android.os.Bundle,int)) to avoid exceeding Android's 1MB `savedInstanceState` limit. For more information, see [Manage
   WebView state efficiently](https://developer.android.com/develop/ui/views/layout/webapps/manage-state).
9. **Optimize network connections and page loading with speculative loading APIs.** To reduce navigation latency, use Jetpack Webkit APIs to prepare network connections and content in advance. Call [`Profile.addQuicHints`](https://developer.android.com/develop/ui/views/layout/webapps/speculative-loading#quic-hints) to pre-populate HTTP/3 over QUIC support so WebView can use QUIC immediately on the first connection, and use [`Profile.preconnect`](https://developer.android.com/develop/ui/views/layout/webapps/speculative-loading#preconnect-origins) to pre-warm network sockets. When destination URLs are known or likely, use [`Profile.prefetchUrlAsync`](https://developer.android.com/develop/ui/views/layout/webapps/speculative-loading#prefetching-content) or [`WebViewCompat.prerenderUrlAsync`](https://developer.android.com/develop/ui/views/layout/webapps/speculative-loading#prerendering-pages) to fetch or render pages in the background. For more information, read [Speculative loading in WebView](https://developer.android.com/develop/ui/views/layout/webapps/speculative-loading).
10. **Disable automatic favicon downloads if you don't need them.** By default, `WebView` automatically downloads a favicon whenever a site is visited upon navigation. `WebView` keeps two copies of each downloaded favicon (one in Java and one in native memory), so disabling favicon downloads saves memory (approximately 8 KB per `WebView` instance) and reduces bandwidth consumption. If your app doesn't use or display favicons, use [`WebSettingsCompat.setDownloadFaviconsEnabled()`](https://developer.android.com/reference/androidx/webkit/WebSettingsCompat#setDownloadFaviconsEnabled(android.webkit.WebSettings,boolean)) from the [Jetpack Webkit](https://developer.android.com/reference/androidx/webkit/package-summary) library to disable automatic downloads:

    ### Kotlin

    ```kotlin
    // In this example, "myWebView" is an instance of WebView.
    if (WebViewFeature.isFeatureSupported(WebViewFeature.DOWNLOAD_FAVICONS_ENABLED)) {
        WebSettingsCompat.setDownloadFaviconsEnabled(myWebView.settings, false)
    }
    ```

    ### Java

    ```java
    // In this example, "myWebView" is an instance of WebView.
    if (WebViewFeature.isFeatureSupported(WebViewFeature.DOWNLOAD_FAVICONS_ENABLED)) {
        WebSettingsCompat.setDownloadFaviconsEnabled(myWebView.getSettings(), false);
    }
    ```
11. **Manage saved state and avoid transaction limits.** If you save your `WebView` state during lifecycle events using `saveState(Bundle)`, enforce payload size limits using [`WebViewCompat.saveState()`](https://developer.android.com/reference/androidx/webkit/WebViewCompat#saveState(android.webkit.WebView,android.os.Bundle,int)) to avoid exceeding Android's 1MB `savedInstanceState` limit. For more information, see [Manage
    WebView state efficiently](https://developer.android.com/develop/ui/views/layout/webapps/manage-state).

## Additional resources

- [Speculative loading in WebView](https://developer.android.com/develop/ui/views/layout/webapps/speculative-loading)
- [Manage WebView state efficiently](https://developer.android.com/develop/ui/views/layout/webapps/manage-state)
- [Pixel-Perfect UI in the WebView](https://developers.google.com/chrome/mobile/docs/webview/pixelperfect)
- [Learn Responsive Design](http://www.html5rocks.com/en/mobile/responsivedesign/)
- [High DPI images for variable pixel densities](http://www.html5rocks.com/en/mobile/high-dpi/)
- [Mobile Web Best Practices](http://www.w3.org/TR/mobile-bp/)
- [Make the Web Faster](https://developers.google.com/speed/overview)