Discussion :

[-thierry-]

Bonjour,
Je sais, c'est une mauvaise pratique que de vouloir forcer son site à rester dans une orientation particulière, ce n'est pas Responsive Web Design.
Il faut s'adapter au support pour changer l'affichage de son contenu, certes, sauf que...
Je suis dans un cas où justement, s'adapter au support c'est forcer son site à s'afficher toujours en paysage car le contenu est par nature en format paysage.

Je m'explique, le site est basé entièrement sur une production artistique en paysage, c'est un choix fondamental de design lié aux œuvres de l'artiste, enlever ce choix fait perdre tout intérêt au choix artistique réalisé et le site n'est plus "lisible".

Ma question est donc comment faire pour bloquer l'affichage en mode paysage ? (pour mobile comme pour tablette).
En css ? en javascript ? en HTML ?
Comment faire ?
Merci.

[NoSmoking]

Bonjour,
j'ai un peu de mal à concevoir ce qui te bloque

As tu une page exemple en ligne ?

[-thierry-]

Je souhaite juste que mes pages restent en orientation paysage.
C'est à dire que lorsque l'utilisateur retourne son appareil la page ne passe pas en mode portrait, dis autrement je souhaite obliger l'utilisateur à tenir son appareil toujours en mode paysage...
Lorsque que l'on regarde des œuvres qui sont toujours plus larges que haute (avec la même proportion), cela n'a aucun sens de montrer l'œuvre en petit avec beaucoup d'espace au dessus et au dessous, et elle devient illisible sur un petit appareil.
Voici en guise d'exemple le problème que cela pose :

Merci pour votre aide.

[NoSmoking]

Dans ce cas fixe une min-width cela obligera le scroll horizontal de la page, donc de grande chance de susciter le retour au mode paysage.

[rodolphebrd]

Salut,

Tu peux éventuellement placer ton contenu en display:none; en mode portrait avec un message d'avertissement pour l'usager.
Ton contenu n'apparait donc qu'en paysage.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#avertissement {
	display: none;
}
 @media only screen and (orientation:portrait) {
#wrapper {
	display: none;
}
#avertissement {
	display: block;
}
}
 @media only screen and (orientation:landscape) {
#avertissement {
	display: none;
}
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div id="wrapper"> 
  <!-- html du site --> 
</div>
<div id="avertissement">
  <p>Attention ce site n&apos;est visible qu&apos;en mode paysage.</p>
</div>

http://codepen.io/anon/pen/emOeqR

@NoSmoking : je ne visualise pas ta solution

[ryan]

Yop!

Et faire une rotation du contenu (avec un transfrom:rotate) pour le replacer verticalement quand l'utilisateur place son smartphone en portrait? L'utilisateur serait forcé de constater que le site a vraiment envie d'être consulté en mode paysage.