Chcę, aby moja witryna była wyświetlana tylko w orientacji poziomej, czy to możliwe? Nie ma znaczenia, jaka jest orientacja urządzenia w dłoni użytkownika, ale strona internetowa zawsze będzie w trybie poziomym. Widziałem aplikację na iPhone'a działającą w ten sposób, ale czy można to zrobić dla strony internetowej?

@Golmaal naprawdę odpowiedział na to pytanie, po prostu jestem trochę bardziej rozwlekły.

<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>

Nie masz kontroli nad użytkownikiem zmieniającym orientację, ale możesz przynajmniej wysłać mu wiadomość. Ten przykład spowoduje ukrycie opakowania w trybie pionowym i wyświetlenie komunikatu ostrzegawczego, a następnie ukrycie komunikatu ostrzegawczego w trybie poziomym i wyświetlenie portretu.

Nie sądzę, aby ta odpowiedź była lepsza niż @Golmaal, tylko komplement do niej. Jeśli podoba Ci się ta odpowiedź, podaj kredyt @Golmaal.

Aktualizacja

Ostatnio dużo pracowałem z Cordovą i okazuje się, że MOŻESZ nią sterować, gdy masz dostęp do natywnych funkcji.

Kolejna aktualizacja

Więc po wypuszczeniu Cordova w końcu jest naprawdę okropnie. Lepiej jest użyć czegoś takiego jak React Native, jeśli chcesz mieć JavaScript. To naprawdę niesamowite i wiem, że to nie jest czysta sieć, ale sama obsługa sieci na urządzeniach mobilnych zawiodła.

Podczas gdy ja sam czekałbym tutaj na odpowiedź, zastanawiam się, czy można to zrobić za pomocą CSS:

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

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

Spróbuj tego To może być bardziej odpowiednie dla Ciebie

#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>

To automatycznie zarządza równomierną rotacją.

Musiałem bawić się szerokością moich głównych kontenerów:

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