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?
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:
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.
screen.orientation.lock('landscape');
Lo costringerà a cambiare e a rimanere in modalità orizzontale. Testato su Nexus 5.
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;
}
}
landscapea portraite funziona come previsto@media screen and (orientation: portrait)
portrait(in modo che possa passare a landscape).
vha vwe vwa vhin tutti i file CSS (in modalità portrait) ... quindi se qualcuno non è riuscito probabilmente a causa di esso.
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!