Je souhaite afficher mon site Web uniquement en mode paysage, est-ce possible? Peu importe l'orientation de l'appareil dans la main de l'utilisateur, mais le site Web sera toujours en mode paysage. J'ai vu une application iPhone fonctionner comme ça, mais cela peut-il être fait pour un site Web?

@Golmaal a vraiment répondu à cela, je suis juste un peu plus bavard.

<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 déplaçant l'orientation, mais vous pouvez au moins lui envoyer un message. Cet exemple masquera l'emballage en mode portrait et affichera le message d'avertissement, puis masquera le message d'avertissement 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.

Une autre mise à jour

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

Alors que j'attendrais moi-même 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}
}

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 une rotation uniforme.

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%);
    }
  }
}