costringendo il sito Web a mostrare solo in modalità orizzontale

Question

Desidero mostrare il mio sito Web solo in modalità orizzontale, è possibile? Non importa quale sia l'orientamento del dispositivo nella mano dell'utente, ma il sito web sarà sempre in modalità orizzontale. Ho visto l'applicazione dell'iPhone funzionare in questo modo ma è possibile farlo per un sito Web?

Answer 1

Mentre mi sarei aspetterò qui per una risposta, mi chiedo se si può fare tramite CSS:

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

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

Answer 2

@Golmaal davvero risposto questo, sto solo essere un po 'più dettagliato.

<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 si ha alcun controllo sull'utente che sposta l'orientamento, tuttavia è possibile almeno inviarli. Questo esempio nasconde il wrapper se in modalità verticale e mostra il messaggio di avviso e quindi nasconde il messaggio di avviso in modalità orizzontale e mostra il ritratto.

Non credo che questa risposta sia meglio di @Golmaal, solo un complimento. Se ti piace questa risposta, assicurati di dare credito a @Golmaal.

Aggiornamento

Ho lavorato con Cordova molto recente e si scopre che si possono controllare quando si ha accesso alle funzioni native.

Un altro aggiornamento

Così, dopo aver rilasciato Cordova è davvero terribile, alla fine. È meglio usare qualcosa come React Native se vuoi JavaScript. È davvero incredibile e so che non è una rete pura, ma è un tipo di fallimento.

Answer 3

Prova questo Potrebbe essere più appropriato per voi

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

Ciò gestire automaticamente anche la rotazione.

Answer 4

ho dovuto giocare con le larghezze delle mie contenitori principali:

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