85

Voglio mostrare il mio sito web solo in modalità orizzontale, è possibile? Non importa quale sia l'orientamento del dispositivo in mano all'utente, ma il sito web sarà sempre in modalità orizzontale. Ho visto un'applicazione per iPhone funzionare così, ma può essere fatto per un sito web?

javascript html mobile-browser

— coure2011
fonte

3

Bella domanda, ma scommetto che la risposta è "Non possibile" anche se puoi imbrogliare: stackoverflow.com/a/4807047/615754 .

— nnnnnn

Non proprio. Puoi in qualche modo falsificarlo usando le trasformazioni CSS, ma è brutto, e non penso che ci sia un modo per sapere se è capovolto su Android. Abbastanza sicuro che questo sia stato discusso qui prima.

— Dagg Nabbit

1

è possibile forzare il sito web ad avere una larghezza minima: 320px? quindi se la dimensione dello schermo è di risoluzione inferiore, l'utente dovrà scorrere per visualizzare il sito completo. Oppure posso ingrandire i contenuti da 240 px di larghezza a 320 px?

— coure2011

Non sono sicuro di quanto questo collegamento possa esserti utile, ma le ultime funzionalità [gennaio 2020] suggeriscono una nuova API per il blocco dell'orientamento dal W3C w3c.github.io/screen-orientation

— Sarath Sajan

117

@Golmaal ha davvero risposto a questo, sono solo un po 'più prolisso.

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

Non hai alcun controllo sull'utente che sposta l'orientamento, tuttavia puoi almeno inviargli un messaggio. Questo esempio nasconderà il wrapper se in modalità verticale e mostrerà il messaggio di avviso, quindi nasconderà il messaggio di avviso in modalità orizzontale e mostrerà il ritratto.

Non penso che questa risposta sia migliore di @Golmaal, solo un complimento. Se ti piace questa risposta, assicurati di dare a @Golmaal il merito.

Aggiornare

Ho lavorato molto con Cordova di recente e risulta che PUOI controllarlo quando hai accesso alle funzionalità native.

Un altro aggiornamento

Quindi, dopo aver rilasciato Cordova, alla fine è davvero terribile. È meglio usare qualcosa come React Native se vuoi JavaScript. È davvero sorprendente e so che non è puro web ma la pura esperienza web su dispositivi mobili ha fallito.

— Jason Sebring
fonte

ha reso la mia giornata! questo è uno script davvero utile per forzare la modalità orizzontale su piccoli dispositivi inserendo un bel messaggio.

— dhruvpatel

hai ottenuto la maggior parte del merito però;) + 1d per la tua risposta ben descritta e @Golmaal ..

— Hitesh Misro

Davvero utile, grazie! Vale la pena notare che questo non sembra funzionare se lo inserisci in un foglio di stile separato.

— Mmm

La tua risposta è migliore di quella a cui fai riferimento. Fornisci una soluzione effettiva e consigli un avviso facilmente implementabile invece di qualcosa di più creativo e problematico. L'altra "risposta" potrebbe averti ispirato, ma più o meno era solo chiedersi ad alta voce. Sarebbe stato meglio come commento che menzionasse l'esistenza della orientationproprietà del gruppo condizionale.

— Vince

46

Mentre io stesso aspetterei qui una risposta, mi chiedo se possa essere fatto tramite CSS:

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

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

— Golmaal
fonte

35

Prova questo Potrebbe essere più appropriato per te

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

Espandi lo snippet

Questo gestirà automaticamente anche la rotazione.

— Mr. A
fonte

8

Intelligente, ma non funziona davvero. Gran parte della pagina è inaccessibile quando viene ruotata, perché viene ruotato solo il contenuto e non il browser effettivo.

— Graham

3

Ciò interromperebbe qualsiasi animazione e probabilmente distruggerebbe la reattività mobile della pagina.

— Wissam El-Kik,

2

Ho dovuto giocare con le larghezze dei miei contenitori principali:

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

— Kraken
fonte

bella idea .. eventuali artefatti / rumore quando si passa da ritratto / paesaggio?

— hko

forzando la visualizzazione del sito web solo in modalità orizzontale

@Golmaal ha davvero risposto a questo, sono solo un po 'più prolisso.