web-dev-qa-db-fra.com

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

Je souhaite 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 une application iPhone fonctionner de la sorte, mais est-ce possible pour un site Web?

javascripthtml5mobile-browser
81
coure2011

@Golmaal a vraiment répondu à cela, 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. Cet exemple masquera le wrapper en mode portrait et affichera le message d'avertissement, puis le masquera en mode paysage et affichera le portrait.

Je ne pense pas que cette réponse soit meilleure que @Golmaal, 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 vous POUVEZ le contrôler lorsque vous avez accès aux fonctionnalités natives.

ne autre mise à jour

Donc, après la sortie de Cordova, c'est vraiment terrible à la fin. Il est préférable d’utiliser quelque chose comme React Natif si vous voulez utiliser JavaScript. C’est vraiment incroyable et je sais que ce n’est pas du pur Web, mais l’expérience du Web pur sur mobile a échoué.

112
Jason Sebring

Alors que moi-même j'attendrais ici une réponse, 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}
}
44
Golmaal

Essayez ceci, cela peut ê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 gérera automatiquement même la rotation.

32
Mr. A

Je devais jouer avec les largeurs de mes principaux conteneurs:

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