Sommaire

La détection de l’orientation

Avec l’utilisation des smartphones et des tablettes, le designer web doit tenir compte de l’orientation de ces types d’appareil car ils peuvent être tenus à l’horizontale ou à la verticale.

Foundation vous propose deux classes qui vont permettre d’afficher un contenu selon l’orientation de l’appareil :

  • la classe .show-for-landscape affichera l’élément pour l’orientation horizontale.

  • la classe .show-for-portrait affichera l’élément pour l’orientation verticale.

Voici le code HTML de l’exemple :

<div class="callout clearfix"> 
  <p class="show-for-landscape">Votre appareil est à l’horizontal.</p> 
  <p class="show-for-portrait">Votre appareil est à la vertical.</p> 
</div>

Le fichier de cet exemple à télécharger est Chapitre 06 / 06-affichage-e.html.

Voici l’affichage obtenu avec une orientation horizontale, en paysage :

images/C06-010.png

Voici l’affichage obtenu avec une orientation verticale, en portrait :

images/C06-011.png

Les classes utilisent à nouveau la propriété display avec le paramètre !important, selon l’orientation détectée par la requête de média.

Voici les propriétés utilisées dans une orientation horizontale, en paysage :

@media screen and (orientation: landscape) { 
  .show-for-landscape, 
  .hide-for-portrait ...