44 votes

Conseils pour optimiser un site Web pour le navigateur Android?

Je recherche des conseils, des astuces et des ressources sur l'optimisation de la conception d'un site Web pour le navigateur Android.

Je construis une application Android et certaines fonctionnalités seront accessibles via une interface Web.

67voto

Daniel Points 993

Je m'appuie sur deux éléments pour optimiser les sites web pour les navigateurs mobiles (surtout Android et iPhone):

Meta tags: HandheldFriendly et la fenêtre d'affichage

Habituellement je veux des pages de ne pas avoir une page à la largeur de 800 à 900 pixels, comme Android et iPhone, les navigateurs de la définir par défaut. Pour avoir la largeur de la page, le même que le dispositif de largeur, j'ai mis le meta tags:

<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />

CSS media queries

Je adapter le design à la largeur de la page. Par exemple, avoir un 2 le contenu de la colonne pour les grands écrans et 1 colonne pour les petits écrans et d'impression. J'ai donc inclure dans la css principale de fichier de plus de css avec des requêtes de média:

@import url(style-screen.css) screen;
@import url(style-small.css) print, handheld;
@import url(style-large.css) screen and (min-width: 801px);
@import url(style-small.css) screen and (max-width: 800px);

16voto

Dave Lancea Points 917

J'ai trouvé qu'il était très difficile d'ajouter ces deux balises méta à mon site:

 <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="HandheldFriendly" content="True" />
 

Voici plus d'informations sur eux: http://learnthemobileweb.com/2009/07/mobile-meta-tags/

5voto

Mike Chelen Points 124

En ce qui concerne jQuery, il existe une version optimisée pour les navigateurs mobiles: http://jquerymobile.com/

4voto

Zitrax Points 3443

dev.opera a quelques articles, pas pour Android bien sûr, mais pour les sites Web mobiles en général. Par exemple:

Rendre les petits appareils superbes

Conception et développement de sites Web mobiles dans le monde réel

1voto

Peter Points 9636

Comme toutes les pages Web mobiles gardent chaque chose aussi fine que possible.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X