Forza la modalità di orientamento "orizzontale"


93

Sto cercando di forzare la modalità "orizzontale" per la mia applicazione perché la mia applicazione non è assolutamente progettata per la modalità "verticale". Come lo posso fare?

Risposte:


95

Ora è possibile con il manifest della webapp HTML5. Vedi sotto.


Risposta originale:

Non è possibile bloccare un sito Web o un'applicazione Web con un orientamento specifico. Va contro il comportamento naturale del dispositivo.

Puoi rilevare l'orientamento del dispositivo con query multimediali CSS3 come questa:

@media screen and (orientation:portrait) {
    // CSS applied when the device is in portrait mode
}

@media screen and (orientation:landscape) {
    // CSS applied when the device is in landscape mode
}

Oppure associando un evento di modifica dell'orientamento JavaScript come questo:

document.addEventListener("orientationchange", function(event){
    switch(window.orientation) 
    {  
        case -90: case 90:
            /* Device is in landscape mode */
            break; 
        default:
            /* Device is in portrait mode */
    }
});

Aggiornamento del 12 novembre 2014: ora è possibile con il manifest della webapp HTML5.

Come spiegato su html5rocks.com , ora puoi forzare la modalità di orientamento utilizzando un manifest.jsonfile.

Devi includere quelle righe nel file json:

{
    "display":      "standalone", /* Could be "fullscreen", "standalone", "minimal-ui", or "browser" */
    "orientation":  "landscape", /* Could be "landscape" or "portrait" */
    ...
}

E devi includere il manifest nel tuo file html in questo modo:

<link rel="manifest" href="manifest.json">

Non sono esattamente sicuro di quale sia il supporto sul manifest della webapp per il blocco della modalità di orientamento, ma Chrome è sicuramente lì. Aggiornerò quando avrò le informazioni.


1
Sì, anche webapp. Anche se "salvi" il tuo sito web nella schermata principale dell'iPhone o dell'iPad, la webapp cambierà il suo orientamento.
Rémi Breton

2
Come per caniuse.com, i manifesti possono essere utilizzati a partire da Android 4.1. Vedi caniuse.com/#feat=offline-apps
Rémi Breton

1
Come posso sapere se il manifest è stato chiamato? Non funziona per me e non viene visualizzato nulla nella rete dei miei strumenti di sviluppo nonostante il manifest sia nello stesso posto dell'indice.html dove è collegato.
Ian S

3
In Chrome puoi ora controllare la scheda "Applicazione" in modalità Ispezione, c'è una pagina "Manifest" con un link diretto al tuo file json e informazioni su di esso.
drskullster

1
@ RémiBreton - stai ancora cercando queste informazioni, quindi puoi aggiornarle? Aspettiamo pazientemente da anni!
ashleedawg

47
screen.orientation.lock('landscape');

Lo costringerà a cambiare e a rimanere in modalità orizzontale. Testato su Nexus 5.

http://www.w3.org/TR/screen-orientation/#examples


3
Non funziona su Android utilizzando il browser Internet predefinito (non Chrome): qualche idea?
Antonios Tsimourtos

7
Non implementato per Safari (iOS e macOS): caniuse.com/#feat=screen-orientation
MBach

4
Solo una breve nota, funziona solo dopo essere entrati in modalità a schermo intero.
Thane Brimhall

2
Questo metodo è sconsigliato da Mozilla: developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation Inoltre ha una scarsa compatibilità del browser
Fernando Garcia

1
Anche questo non funziona in modalità a schermo intero in Chrome: |
Shamshirsaz

24

Uso alcuni CSS come questo (basato su trucchi CSS ):

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: portrait) {
  html {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    height: 100vw;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}

3
Ho usato questa risposta .. tutto quello che devo fare è cambiare la media query da landscapea portraite funziona come previsto@media screen and (orientation: portrait)
ymz

Ho modificato la risposta per aiutare le persone future. La rotazione deve essere applicata quando la modalità corrente è portrait(in modo che possa passare a landscape).
lfarroco

Grazie. Ho cercato qualcosa di simile.
perdente

Come potrei applicarlo solo su una singola pagina tramite page-id-xxx?
Homer

1
grazie per questo! Ho scoperto che è necessario cambiare ogni vha vwe vwa vhin tutti i file CSS (in modalità portrait) ... quindi se qualcuno non è riuscito probabilmente a causa di esso.
tomer raitz

0

Ho avuto lo stesso problema, era un file manifest.json mancante, se non trovato il browser decide con l'orientamento è meglio adattarsi, se non specifichi il file o usi un percorso sbagliato.

Ho corretto solo chiamando correttamente manifest.json sulle intestazioni html.

Le mie intestazioni html:

<meta name="application-name" content="App Name">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="manifest" href="manifest.json">
<meta name="msapplication-starturl" content="/">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#">
<meta name="msapplication-TileColor" content="#">
<meta name="msapplication-config" content="browserconfig.xml">
<link rel="icon" type="image/png" sizes="192x192" href="android-chrome-192x192.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#ffffff">
<link rel="shortcut icon" href="favicon.ico">

E il contenuto del file manifest.json:

{
  "display": "standalone",
  "orientation": "portrait",
  "start_url": "/",
  "theme_color": "#000000",
  "background_color": "#ffffff",
  "icons": [
  {
    "src": "android-chrome-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  }
}

Per generare le tue favicon e icone usa questo webtool: https://realfavicongenerator.net/

Per generare il tuo file manifest usa: https://tomitm.github.io/appmanifest/

Il mio PWA funziona alla grande, spero che aiuti!

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.