Bonjour à tous,
Aujourd'hui petit tuto tout simple pour ceux qui souhaitent afficher une page uniquement en mode landscape. Bien qu'en responsive on puisse afficher correctement une page en mode portrait, il arrive quand même des cas ou c'est assez délicat ( tableau de données, courbes, et j'en passe )
Imaginons une page web simple qui ressemble à ceci :
( j'ai mis un tableau en guise d'éléments )
En mode portrait nous aurions en exagérant:
Je vous propose donc d'ajouter une div contenant une image, ici un pictogramme:
On ajoute au passage les classes css
et le CSS qui va avec:
Ici on voit que par défaut on masque le pictogramme, mais en ajoutant une media querie pour l'orientation portrait, on vient masquer la page et afficher le picto.
L'utilisateur n'a ici plus le choix, il doit tourner son mobile pour afficher le contenu
Aujourd'hui petit tuto tout simple pour ceux qui souhaitent afficher une page uniquement en mode landscape. Bien qu'en responsive on puisse afficher correctement une page en mode portrait, il arrive quand même des cas ou c'est assez délicat ( tableau de données, courbes, et j'en passe )
Imaginons une page web simple qui ressemble à ceci :
( j'ai mis un tableau en guise d'éléments )
<body>
<div id="contain-page">
<img id="page" src="https://d2ans0z9s1x1c.cloudfront.net/products/00163e6f-f163-1ed9-91cb-30ef77a94b11.jpg"/>
</div>
</body>
En mode portrait nous aurions en exagérant:
Je vous propose donc d'ajouter une div contenant une image, ici un pictogramme:
On ajoute au passage les classes css
<body>
<div id="contain-page" class="hideOnPortrait">
<img id="page" src="https://d2ans0z9s1x1c.cloudfront.net/products/00163e6f-f163-1ed9-91cb-30ef77a94b11.jpg"/>
</div>
<div class="hideOnLandscape middle">
<img id="turn-logo" src="http://img113.xooimage.com/files/d/d/0/turn-571b7d6.png"></img>
</div>
</body>
et le CSS qui va avec:
body {
margin: 0;
padding: 0;
background-color: black;
overflow: hidden;
}
#page {
width: 100vw;
height: 100vh;
}
#turn-logo { width: 200px; }
.middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.hideOnLandscape { visibility: hidden; }
.hideOnPortrait { visibility: visible; }
@media screen and (orientation: portrait) {
.hideOnLandscape { visibility: visible; }
.hideOnPortrait { visibility: hidden; }
}
Ici on voit que par défaut on masque le pictogramme, mais en ajoutant une media querie pour l'orientation portrait, on vient masquer la page et afficher le picto.
L'utilisateur n'a ici plus le choix, il doit tourner son mobile pour afficher le contenu