Esiste un modo per forzare il layout orizzontale/orizzontale sui dispositivi mobili?

Question

Sto costruendo una versione mobile di un sito Web e, in questo caso specifico, sarebbe perfetta per il layout orizzontale. C'è un modo per forzare questo layout indipendentemente dall'impostazione dell'utente?

La risposta con un modo universale è apprezzata, ma anche se sai come raggiungere questo obiettivo su qualsiasi piattaforma specifica (iPhone, Android ..) così forse possiamo raccogliere un set di regole decente per la maggior parte degli utenti mobili.

Answer 1

C'è un trucco che lo compie, ma consiglio seriamente di non utilizzarlo - il tuo design dovrebbe adattarsi al fatto che qualcuno sia in modalità verticale o orizzontale.

Fase 1: richiede la proprietà window.orientation per vedere se si è in modalità orizzontale o verticale

Fase 2: Se siete in modalità verticale utilizzare una rotazione -webkit-transform (-90) su un div questo avvolge l'intera pagina per forzarla in un layout orizzontale.

Questo non funzionerà in modo corretto: l'interfaccia utente del browser sarà ancora in modalità verticale, ma presumibilmente l'utente capirà che è necessario ruotare il telefono in modalità orizzontale per visualizzare il contenuto. Questo è incredibilmente fastidioso per gli utenti: probabilmente c'è una buona ragione per cui stanno cercando di leggere il tuo sito in modalità verticale.

Answer 2

Prova ad aggiungere questa meta per la vostra <testa>

<meta name="viewport" content="width=480"> 

La presenza di una barra di scorrimento orizzontale in modalità verticale sarà cue l'utente che lui/lei ha bisogno di ruotare nel paesaggio. Non riesco a vedere molti casi d'uso per questo - ma ho visto questo per alcuni giochi e applicazioni di mappatura quindi non è del tutto malvagio.