forcer le site web à s'afficher uniquement en mode paysage

Question

Je veux afficher mon site Web en mode paysage uniquement, est-ce possible ? L'orientation de l'appareil dans la main de l'utilisateur importe peu, mais le site web sera toujours en mode paysage. J'ai vu des applications iPhone fonctionner de cette manière, mais est-ce possible pour un site web ?

Answer 1

@Golmaal a vraiment répondu à cette question, je suis juste un peu plus verbeux.

<style type="text/css">
    #warning-message { display: none; }
    @media only screen and (orientation:portrait){
        #wrapper { display:none; }
        #warning-message { display:block; }
    }
    @media only screen and (orientation:landscape){
        #warning-message { display:none; }
    }
</style>

....

<div id="wrapper">
    <!-- your html for your website -->
</div>
<div id="warning-message">
    this website is only viewable in landscape mode
</div>

Vous n'avez aucun contrôle sur l'utilisateur qui déplace l'orientation, mais vous pouvez au moins lui envoyer un message. Dans cet exemple, le wrapper sera masqué en mode portrait et le message d'avertissement sera affiché, puis le message d'avertissement sera masqué en mode paysage et le portrait sera affiché.

Je ne pense pas que cette réponse soit meilleure que celle de @Golmaal, mais seulement un compliment. Si vous aimez cette réponse, assurez-vous de donner le crédit à @Golmaal.

Mise à jour

J'ai beaucoup travaillé avec Cordova récemment et il s'avère que l'on peut le contrôler lorsque l'on a accès aux fonctionnalités natives.

Une autre mise à jour

Donc, après avoir publié Cordova, c'est vraiment terrible au final. Il est préférable d'utiliser quelque chose comme React Native si vous voulez du JavaScript. C'est vraiment étonnant et je sais que ce n'est pas du pur web, mais l'expérience du pur web sur le mobile a en quelque sorte échoué.

Answer 2

Bien que j'attende moi-même une réponse ici, je me demande si cela peut être fait via CSS :

@media only screen and (orientation:portrait){
#wrapper {width:1024px}
}

@media only screen and (orientation:landscape){
#wrapper {width:1024px}
}

Answer 3

Essayez ceci. Cela pourrait être plus approprié pour vous

#container { display:block; }
@media only screen and (orientation:portrait){
  #container {  
    height: 100vw;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}
@media only screen and (orientation:landscape){
  #container {  
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     -ms-transform: rotate(0deg);
     transform: rotate(0deg);
  }
}

<div id="container">
    <!-- your html for your website -->
    <H1>This text is always in Landscape Mode</H1>
</div>

Cela permettra de gérer automatiquement la rotation régulière.

Answer 4

J'ai dû jouer avec les largeurs de mes conteneurs principaux :

html {
  @media only screen and (orientation: portrait) and (max-width: 555px) {
    transform: rotate(90deg);
    width: calc(155%);
    .content {
      width: calc(155%);
    }
  }
}