Adaptation des appareils

En tant que développeur Web (ou d’applications du Windows Store en JavaScript), vous êtes confronté à un dilemme : coder votre site pour qu’il fonctionne avec le plus grand nombre possible d’appareils, de tailles et de résolutions, ou risquer de vous attirer les foudres des utilisateurs en permettant éventuellement à votre contenu d’apparaître tronqué (dans les dispositions fixes) ou totalement désordonné (dans les dispositions fluides). La règle @-ms-viewport, conjointement aux requêtes de média CSS (Cascading Style Sheets), tente d’apporter une solution à ce dilemme en permettant aux développeurs Web et aux développeurs d’applications du Windows Store en JavaScript pour Windows 8 d’optimiser sans trop d’effort la disposition des sites et des applications pour différents appareils.

La règle @-ms-viewport repose sur la règle @viewport, qui est définie dans la spécification CSS Device Adaptation. Cette spécification n’est pour l’instant qu’au stade d’ébauche. Sachez que l’implémentation de @-ms-viewport dans Internet Explorer 10 et les applications du Windows Store en JavaScript ne correspond pas exactement aux informations définies dans la spécification. Cela peut changer au cours des révisions et des améliorations apportées à la spécification « CSS Device Adaptation ».

Affichage des sites dans des fenêtres étroites

La plupart des sites Web actuels sont peu exploitables lorsqu’ils sont affichés dans une fenêtre très étroite. Les dispositions fixes peuvent être tronquées et les dispositions fluides devenir confuses. Les scénarios d’application dans Windows 8 impliquent souvent des fenêtres très étroites. Pour éviter que le contenu paraisse tronqué ou confus, il est automatiquement mis à l’échelle. Cette solution ne vous demande aucune opération supplémentaire en tant que développeur, mais elle peut ne pas convenir selon la largeur par défaut de votre contenu. Les utilisateurs devront zoomer chaque fois qu’ils auront besoin d’accéder au contenu.

À l’aide de la règle @-ms-viewport, vous pouvez fournir plus facilement des sites et des applications performants. Au lieu de chercher à utiliser une taille unique pour l’ensemble du contenu, ce qui peut vous obliger à agrandir tant bien que mal une petite interface utilisateur ou, au contraire, à réduire considérablement une grande interface utilisateur, vous pouvez utiliser à la fois @-ms-viewport et les requêtes de média CSS afin d’optimiser votre site ou application avec différentes plages de résolutions. Vous pouvez spécifier que les pages qui sont optimisées pour une plage particulière soient mises à l’échelle de façon plus naturelle pour les appareils dont la résolution entre dans cette plage. Vous pouvez ainsi optimiser votre site, non seulement pour l’affichage plein écran mais également pour les états d’affichage Portrait et Snapped.

Utilisation de la règle @-ms-viewport

La règle @-ms-viewport fonctionne conjointement avec les requêtes de média pour optimiser votre disposition. En général, vous devez imbriquer la règle @-ms-viewport dans la requête de média, comme le montre l’extrait de pseudo-code suivant :

@media [media query logic here] {
  @-ms-viewport {
    [viewport size here]
  }
  [CSS for this layout combination goes here.]
}

Notez que dans les navigateurs autres qu’Internet Explorer 10 (ou dans des anciennes versions de Windows Internet Explorer), cette feuille de style (CSS) offre une dégradation élégante. Si la règle @-ms-viewport et son contenu ne sont pas reconnus ils sont simplement ignorés.

Exemple d’utilisation : page Web avec une optimisation d’état Snapped

L’exemple suivant montre une utilisation courante de la règle @-ms-viewport. Ce sélecteur peut surtout être utilisé pour optimiser une petite version de votre page Web afin de l’afficher dans l’état Snapped.

@media screen and (max-width: 400px) {
  @-ms-viewport { width: 320px; }
  /* CSS for 320px width Modern taskbar layout goes here */
} 

Toute fenêtre d’affichage d’une largeur inférieure à 400 pixels (par exemple, l’état d’affichage Snapped) est représentée avec une largeur de 320 pixels et mise à l’échelle. La CSS (qui a normalement été optimisée pour un petit écran) indiquée en dessous de cette fenêtre sera appliquée.

Exemple d’utilisation : application à taille fixe

Voici un exemple très simple d’utilisation d’une règle @-ms-viewport sans aucune requête de média (ce qui indique que la règle s’applique dans tous les cas).


@-ms-viewport {
  width: 1024px;
  height: 768px;
}

Cet exemple peut être utilisé, par exemple, dans une application du Windows Store en JavaScript qui est verrouillée en mode paysage. Il montre que, quel que soit la résolution de l’affichage ou du format d’affichage (4:3, écran large 16:9, etc.), le contenu affiché (la « fenêtre d’affichage ») doit présenter au moins 1 024 pixels sur 768 pixels. Dans le cas d’un affichage de, par exemple, 1 920 pixels sur 1 080 pixels (format écran large 16:9), la fenêtre d’affichage est mise à l’échelle selon la hauteur de l’affichage. Dans un affichage d’écran large, l’application peut être centrée à l’aide des méthodes CSS normales pour produire un effet de « pillar box » avec des barres noires verticales des deux côtés de la fenêtre d’affichage. Sur un affichage au format 1 280×960, étant donné que ses proportions sont égales à celles de la fenêtre d’affichage 1 024×768, la fenêtre d’affichage sera mise à l’échelle pour remplir complètement l’affichage.

Nous pouvons étendre cet exemple en ajoutant des requêtes de média qui autorisent les modes d’affichage paysage et portrait dans cette application :


@media screen and (orientation: landscape) {
  @-ms-viewport {
    width: 1024px;
    height: 768px;
  }
  /* CSS for landscape layout goes here */
}

@media screen and (orientation: portrait) {
  @-ms-viewport {
    width: 768px;
    height: 1024px;
  }
  /* CSS for portrait layout goes here */
}

Cet exemple est identique au précédent, sauf que l’orientation Portrait est prise en compte dans la seconde règle @media. Dans le cas du mode portrait, l’orientation du contenu peut changer (le texte et les images peuvent être disposés différemment pour tenir compte de la différence de direction) mais la fenêtre d’affichage reste la même. Les valeurs de largeur et de hauteur ont été interverties pour que la zone d’affichage du contenu visible ne change pas.

Exemple d’utilisation : optimisation pour la largeur

L’exemple suivant montre une page dont le comportement de mise à l’échelle a été optimisé pour la largeur à l’aide de requêtes de média et d’une règle @-ms-viewport. Vous pouvez constater que chaque requête de média couvre une plage de résolution différente. Dans chaque plage, la règle @-ms-viewport spécifie la largeur à laquelle chaque appareil dans cette plage doit se mettre à l’échelle. La CSS, qui suit chaque règle, définit ensuite exactement comment afficher le contenu qui a été mis à l’échelle pour cette plage de résolution.


@media screen and (max-width: 400px) {
    @-ms-viewport { width: 320px; }
    /* CSS for 320px layout goes here */
}

@media screen and (min-width: 400px) and (max-width: 640px) {
    @-ms-viewport { width: 400px; }
    /* CSS for 400px layout goes here */
}

@media screen and (min-width: 640px) and (max-width: 1024px) {
    @-ms-viewport { width: 640px; }
    /* CSS for 640px layout goes here */
}

@media screen and (min-width: 1024px) and (max-width: 1366px) {
    @-ms-viewport { width: 1024px; }
    /* CSS for 1024px layout goes here */
}

@media screen and (min-width: 1366px) {
    /* CSS for 1366px layout goes here */
}

Exemple d’utilisation : quitter la mise à l’échelle automatique

Par défaut, Internet Explorer dans la nouvelle interface utilisateur Windows ajuste automatiquement le contenu lorsque la largeur de la fenêtre est inférieure à 1024 pixels. Cela inclut surtout l’état ancré et le mode portrait.

Cependant, lorsque la mise à l’échelle automatique n’est pas utile ou souhaitée, il est possible d’utiliser le mot clé device-width. Ce mot clé signifie que la page est optimisée quelle que soit la largeur d’affichage de l’appareil.


@-ms-viewport { width: device-width; }

Si vous souhaitez utiliser ce mot clé, assurez-vous que la page continue à s’afficher correctement dans l’état Snapped et le mode Portrait.

Informations de référence sur les API

Device Adaptation

Exemples et didacticiels

Concevoir des sites Web adaptatifs

Démonstrations du site Internet Explorer Test Drive

Make it Snappy!

Billets IEBlog

Adaptation de votre site à différentes tailles de fenêtre
Un Web plus stable dans IE10 Release Preview

Spécification

Adaptation des appareils au format CSS

Rubriques associées

Requêtes de média et écouteurs

 

 

Afficher:
© 2014 Microsoft. Tous droits réservés.