Dans cette série sur la réalisation de l’application Metro « Parle moi de… » en HTML et Javascript, nous avons vu

• Création d’un projet d’application Metro en HTML et Javascript
• Mise en place du charme de recherche, des contrôles ListView et SemanticZoom
• Gestion du multilinguisme

Nous allons maintenant voir la gestion des résolutions d’écran et des états visuels de l’application.

Windows 8, bien que résolument tactile, reste Windows. Il n’y a donc pas de résolution d’écran fixée. La résolution minimale supportée est de 1024 pixels, mais il est fréquent aujourd’hui de trouver des écrans en 1920px, y compris sur des portables, et on commence à voir apparaitre des écrans avec des résolutions beaucoup plus importantes.

Par ailleurs, une application Metro peut être dans différents états visuels, correspondant à l’ergonomie de cette nouvelle génération de Windows. L’application peut être affichée au format portrait ou paysage, mais elle peut aussi être en mode « snap », c’est à dire qu’elle est affichée côte à côte avec une autre application. On a dans ce cas une application « snappée » (avec un espace de 320 pixels), et une application « filled » qui occupe le reste de l’espace. Le fait de « snapper » des applications n’est accessible que si votre terminal est en orientation paysage, et que votre écran à une résolution d’au mois 1366 pixels.

Votre application Metro doit impérativement gérer ces différentes résolutions, ainsi que les états visuels (il n’est pas possible pour l’application de refuser de se « snapper »), sous peine d’être refusée dans le processus de certification dans le store.

Nous allons donc voir comment gérer ces paramètres en utilisant les mediaqueries de CSS3, ou à travers l’API javascript.

Dans le prochain épisode de cette série, nous verrons comment utiliser le charme de paramètres et comment stocker des données en local.