Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Le développement de pages et d'applications Web pour appareils mobiles présente des défis différents
au développement d'une page web
pour les navigateurs web de bureau. Les pratiques suivantes peuvent vous aider à fournir
l'application Web la plus efficace pour Android et les autres appareils mobiles.
Redirigez les appareils mobiles vers une version mobile dédiée de votre site Web. Il existe plusieurs
les moyens de le faire à l'aide
de redirections côté serveur. Une méthode courante consiste à "renifler" la
Chaîne user-agent fournie par le navigateur Web. Pour déterminer
une version pour mobile de votre site, recherchez l'icône dans le user-agent.
<ph type="x-smartling-placeholder">
Utiliser le format HTML5
pour les appareils mobiles. HTML5 est le langage de balisage le plus couramment utilisé pour les sites Web mobiles.
Cette norme encourage le développement avec priorité à la mobilité pour s'assurer que les sites Web fonctionnent sur une variété de
appareils. Contrairement aux langages Web précédents, HTML5 utilise des <DOCTYPE> et
Déclarations charset:
<!DOCTYPEhtml>
...
<metacharset="UTF-8">
Utilisez les métadonnées de fenêtre d'affichage pour redimensionner correctement votre page Web. Dans votre document
<head> : fournit des métadonnées qui spécifient comment vous souhaitez que la fenêtre d'affichage du navigateur
afficher votre page Web. Par exemple, les métadonnées de votre fenêtre d'affichage peuvent spécifier la hauteur et la largeur des
la fenêtre d'affichage du navigateur, l'échelle initiale de la page et la densité d'écran cible.
L'exemple suivant montre comment définir des métadonnées de fenêtre d'affichage:
Utilisez une mise en page linéaire verticale. Éviter que l'utilisateur ait besoin de faire défiler l'écran vers la gauche et la droite
sur la navigation sur votre page. Le défilement vers le haut et vers le bas est plus facile pour l'utilisateur et rend votre page plus simple.
Définissez la hauteur et la largeur de la mise en page sur match_parent. Configurer votre
la hauteur et la largeur de l'objet WebView à
match_parent s'assure que les vues de votre application sont correctement dimensionnées. Nous vous déconseillons de définir
la hauteur sur wrap_content, car le dimensionnement est incorrect. De même, si vous définissez
la largeur de mise en page sur wrap_content n'est pas acceptée. Votre WebView risque donc de s'afficher.
utiliser plutôt la largeur de son parent. En raison de ce comportement, il est également important de vous assurer qu'aucun
La hauteur et la largeur des objets de mise en page parents de votre objet WebView sont définies sur
wrap_content
Évitez les demandes de fichiers multiples. Parce que les appareils mobiles ont
généralement une vitesse de connexion
plus lent que sur les ordinateurs de bureau, faites en sorte que votre page se charge aussi vite que possible. Une façon d’accélérer
le processus est de
évitez de charger des fichiers supplémentaires tels que des feuilles de style et des fichiers de script dans <head>.
Tenez également compte
une analyse sur mobile avec
PageSpeed Insights de Google pour obtenir des suggestions d'optimisation détaillées spécifiques à votre application.
Le contenu et les exemples de code de cette page sont soumis aux licences décrites dans la Licence de contenu. Java et OpenJDK sont des marques ou des marques déposées d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/07/27 (UTC).
[[["Facile à comprendre","easyToUnderstand","thumb-up"],["J'ai pu résoudre mon problème","solvedMyProblem","thumb-up"],["Autre","otherUp","thumb-up"]],[["Il n'y a pas l'information dont j'ai besoin","missingTheInformationINeed","thumb-down"],["Trop compliqué/Trop d'étapes","tooComplicatedTooManySteps","thumb-down"],["Obsolète","outOfDate","thumb-down"],["Problème de traduction","translationIssue","thumb-down"],["Mauvais exemple/Erreur de code","samplesCodeIssue","thumb-down"],["Autre","otherDown","thumb-down"]],["Dernière mise à jour le 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)"]]
