85

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?

javascript html mobile-browser

— coure2011
źródło

3

Dobre pytanie, ale założę się, że odpowiedź brzmi „Niemożliwe”, chociaż możesz trochę oszukiwać: stackoverflow.com/a/4807047/615754 .

— nnnnnn

Nie całkiem. Możesz go sfałszować za pomocą transformacji css, ale jest brzydki i nie sądzę, aby można było dowiedzieć się, czy jest do góry nogami na Androidzie. Jestem pewien, że zostało to omówione wcześniej.

— Dagg Nabbit,

1

czy można wymusić na stronie minimalną szerokość: 320px? więc jeśli rozmiar ekranu ma niższą rozdzielczość, użytkownik będzie musiał przewinąć stronę, aby wyświetlić całą witrynę. Czy mogę powiększyć zawartość z 240 do 320 pikseli?

— coure2011

Nie jestem pewien, jak pomocny może być ten link, ale najnowsze funkcje ze [stycznia 2020 r.] Sugerują nowe API dla blokady Orientation z W3C w3c.github.io/screen-orientation

— Sarath Sajan

117

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

— Jason Sebring
źródło

sprawił, że mój dzień! jest to naprawdę przydatny skrypt do wymuszania trybu poziomego na małych urządzeniach, dając przyjemny komunikat.

— dhruvpatel

jednak masz najwięcej zasług;) +1 za dobrze opisaną odpowiedź i @Golmaal ..

— Hitesh Misro

Naprawdę przydatne, dzięki! Warto zauważyć, że to nie działa, jeśli umieścisz go w osobnym arkuszu stylów.

— Mmm,

Twoja odpowiedź jest lepsza niż ta, do której się odnosisz. Dostarczasz rzeczywiste rozwiązanie i polecasz łatwe do wdrożenia ostrzeżenie zamiast czegoś bardziej kreatywnego i problematycznego. Inna „odpowiedź” mogła cię zainspirować, ale było to mniej więcej głośne zastanawianie się. Byłoby lepiej jako komentarz wspominający o istnieniu orientationwarunkowej właściwości grupy.

— Vince

46

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

— Golmaal
źródło

35

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>

Rozwiń fragment

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

— Pan A
źródło

7

Sprytne, ale tak naprawdę nie działa. Duża część strony jest niedostępna, gdy jest obracana, ponieważ obracana jest tylko zawartość, a nie rzeczywista przeglądarka.

— Graham,

2

Spowodowałoby to przerwanie animacji i prawdopodobnie zniszczyłoby responsywność strony na urządzeniach mobilnych.

— Wissam El-Kik

2

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

— Kraken
źródło

fajny pomysł .. jakieś artefakty / szumy podczas przełączania między portretem a krajobrazem?

— hko,

wymuszanie wyświetlania strony internetowej tylko w trybie poziomym

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