Adapter votre site à différentes tailles de fenêtres

IEBlog Français

Blog de l'équipe de développement de Windows Internet Explorer

Adapter votre site à différentes tailles de fenêtres

  • Comments 0

IE10 dans la Windows 8 Release Preview prend en charge les propriétés de largeur et de hauteur de l'adaptation à l'appareil CSS de l'ébauche de travail du W3C. Cela donne aux développeurs Web un outil simple pour contrôler la mise à l'échelle automatique du contenu dans des fenêtres de différentes dimensions. Plus particulièrement, cela permet aux sites Web de s'adapter facilement au navigateur de style Metro Windows 8 en vue ancrée et en orientation Portrait.

Mise à l'échelle automatique et utilisation

La plupart des sites Web disposent d'une optimisation privilégiée pour une fenêtre d'une largeur de 1 024 pixels. Cela assure une expérience utilisateur optimale pour une grande variété d'écrans lorsque le navigateur est agrandi. Il est toutefois possible que les sites ne fonctionnent pas correctement sur les nouveaux terminaux, tels que les tablettes, et avec l'orientation d'écran Portrait s'ils n'ont pas également été optimisés pour d'autres tailles de fenêtres. En particulier, les pages coupent ou déforment fréquemment la disposition lorsqu'elles sont affichées avec une largeur étroite.

Capture d'écran du site Web TechCrunch Web affiché dans une fenêtre très étroite. Seul le bord gauche du contenu du site est visible.Capture d'écran d'une page Wikipedia affichée dans une fenêtre très étroite. La barre de navigation de gauche est visible, l'article affiché est lisible mais compte un grand nombre de retours à la ligne dans une colonne très étroite.
TechCrunch et Wikipedia affichés dans des fenêtres très étroites

Cette disposition étroite est particulièrement importante dans Windows 8, où la vue ancrée du navigateur de style Metro se trouve dans ce même état exactement. Cette situation se produit en outre pour le mode Portrait sur les petites tablettes tactiles, en raison de leur taille plus réduite.

Dans le navigateur de style Metro, la vue ancrée et le mode Portrait sont mis automatiquement à l'échelle par défaut pour assurer une largeur de disposition d'au moins 1 024 pixels. Les périphériques mobiles adoptent une approche similaire pour afficher sur un terminal étroit des sites non optimisés pour les appareils mobiles. Comme la plupart des sites sont conçus pour fonctionner correctement en 1 024 pixels, cela permet de s'assurer qu'ils s'affichent correctement et que le contenu n'est pas coupé par défaut.

Capture d'écran du site Web TechCrunch affiché dans la vue ancrée de style Metro. La page entière disposée sur une largeur de 1 024 pixels est visible et adaptée à l'écran.Capture d'écran d'une page de Wikipedia affichée dans le navigateur de style Metro en vue ancrée. La page entière disposée sur une largeur de 1 024 pixels est visible et adaptée à l'écran.
TechCrunch et Wikipedia affichés dans un navigateur de style Metro Windows 8 en vue ancrée

Bien que cette approche assure une bonne expérience par défaut, les utilisateurs doivent appliquer un zoom avant pour afficher et interagir avec le site.

Fonctionnement optimisé dans une fenêtre étroite

Les meilleures dispositions étroites sont celles qui ont été personnalisées par le développeur Web. Outre l'adaptation au site dans une zone plus étroite, cela peut également nécessiter la modification de la taille des images, la réorganisation du contenu, d'autres outils de navigation dans le site ou d'autres changements fondamentaux du contenu.

Si votre site a déjà effectué ces modifications pour les fenêtres étroites, alors l'adaptation à l'appareil peut être utilisée pour remplacer l'échelle par défaut.

Pour voir de formidables exemples de dispositions adaptatives, consultez Media Queries. Metal Toad Media propose par ailleurs un article intéressant sur la prise en charge de la largeur des dispositions en fonction des périphériques et des tailles d'écrans les plus répandus sur le marché.

Utilisation de @-ms-viewport

Prise en charge simple de la vue ancrée. Si votre site est déjà compatible avec une disposition d'une largeur de 320 pixels, vous pouvez facilement choisir d'afficher cette version dans la vue ancrée. Combiner l'adaptation à l'appareil avec les requêtes de médias CSS permet de remplacer de manière sélective la mise à l'échelle automatique. Ce CSS remplace la mise à l'échelle automatique, et applique à la place une disposition homogène de 320 pixels de large pour toutes les fenêtres d'une largeur de 320 pixels ou moins :

@media screen and (max-width: 320px) {

@-ms-viewport { width: 320px; }

}

Lorsque la largeur de la fenêtre est inférieure à 320 pixels, le contenu est adapté en conséquence. Par exemple, une fenêtre de 300 pixels de large affichera le contenu à une échelle de 93,75 %. Pour les largeurs supérieures, la mise à l'échelle standard d'IE10 s'applique (par exemple, lorsque le navigateur de style Metro est en mode Portrait).

L'adaptation à l'appareil se dégrade de façon mineure dans les navigateurs qui ne la prennent pas encore en charge. Ces navigateurs peuvent toujours bénéficier de la prise en charge des dispositions étroites. Ils ne sont simplement pas mis à l'échelle automatiquement pour adapter le contenu à la fenêtre.

Prise en charge du mode Portrait. Si votre site prend également en charge une disposition d'une largeur de 768 pixels, alors la prise en charge du mode Portrait peut être facilement ajoutée avec une deuxième règle « viewport » :

@media screen and (max-width: 320px) {

@-ms-viewport { width: 320px; }

}

 

@media screen and (min-width: 768px) and (max-width: 959px) {

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

}

Nous vous recommandons de tester votre site dans des largeurs de disposition de 768 pixels (mode Portrait sur la plupart des tablettes) et de 320 pixels (navigateur de style Metro ancré) en plus de la largeur de 1024 pixels et plus (mode Paysage). Vous pouvez voir un exemple de règle « viewport » en action dans la démonstration Make it Snappy! du site Démonstrations de test d'IE.

—Matt Rakow, chef de projet, Internet Explorer

  • Loading...