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

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.