Rotazione del dispositivo di blocco su pagine Web mobili

È ansible rilevare sulla mia pagina, ad esempio utilizzando Javascript, quando l’utente lo visita utilizzando il dispositivo mobile in modalità verticale e interrompe l’orientamento cambiando quando l’utente ruota il suo telefono in orizzontale? C’è un gioco sulla mia pagina, ottimizzato solo per la visualizzazione verticale e non lo voglio in orizzontale.

Le nuove API stanno sviluppando (e sono attualmente disponibili)!

screen.orientation.lock(); // webkit only 

e

 screen.lockOrientation("orientation"); 

Dove “orientamento” può essere uno dei seguenti:

portrait-primary – Rappresenta l’orientamento dello schermo quando è nella modalità ritratto principale. Uno schermo è considerato nella sua modalità ritratto principale se il dispositivo è tenuto nella sua posizione normale e quella posizione è in verticale, o se la posizione normale del dispositivo è in orizzontale e il dispositivo tenuto ruotato di 90 ° in senso orario. La posizione normale dipende dal dispositivo.

portrait-secondary – Rappresenta l’orientamento dello schermo quando è nella sua modalità portrait secondaria. Uno schermo è considerato nella sua modalità ritratto secondario se il dispositivo è tenuto a 180 ° dalla sua posizione normale e quella posizione è in verticale, o se la posizione normale del dispositivo è in orizzontale e il dispositivo tenuto è ruotato di 90 ° in senso antiorario. La posizione normale dipende dal dispositivo.

landscape-primary – Rappresenta l’orientamento dello schermo quando è nella modalità landscape principale. Uno schermo è considerato nella sua modalità orizzontale principale se il dispositivo è tenuto nella sua posizione normale e quella posizione è in orizzontale, o se la posizione normale del dispositivo è in verticale e il dispositivo tenuto è ruotato di 90 ° in senso orario. La posizione normale dipende dal dispositivo.

landscape-secondary – Rappresenta l’orientamento dello schermo quando è nella sua modalità landscape secondaria. Uno schermo è considerato nella sua modalità orizzontale secondaria se il dispositivo tenuto è a 180 ° dalla sua posizione normale e quella posizione è in orizzontale, o se la posizione normale del dispositivo è in verticale e il dispositivo tenuto è ruotato di 90 ° in senso antiorario. La posizione normale dipende dal dispositivo.

portrait – Rappresenta sia portrait-primary che portrait-secondary.

paesaggio – Rappresenta sia il paesaggio primario che il paesaggio secondario.

default – Rappresenta sia portrait-primary che landscape-primary a seconda dell’orientamento naturale dei dispositivi. Ad esempio, se la risoluzione del pannello è 1280 * 800, il valore predefinito lo renderà orizzontale, se la risoluzione è 800 * 1280, il valore predefinito lo renderà ritratto.

Mozilla consiglia di aggiungere un lockOrientationUniversal allo schermo per renderlo più compatibile con più browser.

 screen.lockOrientationUniversal = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation; 

Vai qui per maggiori informazioni: https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation

Nei browser abilitati per JavaScript dovrebbe essere facile determinare se lo schermo è in modalità orizzontale o verticale e compensare usando CSS . Potrebbe essere utile dare agli utenti la possibilità di disabilitare questo o almeno di avvertire che la rotazione del dispositivo non funzionerà correttamente.

modificare

Il modo più semplice per rilevare l’orientamento del browser è controllare la larghezza del browser rispetto all’altezza del browser. Questo ha anche il vantaggio che saprai se il gioco viene giocato su un dispositivo che è naturalmente orientato in modalità orizzontale (come alcuni dispositivi mobili come la PSP). Questo ha più senso che provare a disabilitare la rotazione del dispositivo.

Modifica 2

Daz ha mostrato come è ansible rilevare l’orientamento del dispositivo, ma rilevare l’orientamento è solo metà della soluzione. Se vuoi invertire la modifica automatica dell’orientamento, dovrai ruotare tutto a 90 ° o 270 ° / -90 °, ad es

 $(window).bind('orientationchange resize', function(event){ if (event.orientation) { if (event.orientation == 'landscape') { if (window.rotation == 90) { rotate(this, -90); } else { rotate(this, 90); } } } }); function rotate(el, degs) { iedegs = degs/90; if (iedegs < 0) iedegs += 4; transform = 'rotate('+degs+'deg)'; iefilter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+iedegs+')'; styles = { transform: transform, '-webkit-transform': transform, '-moz-transform': transform, '-o-transform': transform, filter: iefilter, '-ms-filter': iefilter }; $(el).css(styles); } 

Nota: se si desidera ruotare in IE di un angolo arbitrario (per altri scopi), è necessario utilizzare la trasformazione della matrice, ad es.

 rads = degs * Math.PI / 180; m11 = m22 = Math.cos(rads); m21 = Math.sin(rads); m12 = -m21; iefilter = "progid:DXImageTransform.Microsoft.Matrix(" + "M11 = " + m11 + ", " + "M12 = " + m12 + ", " + "M21 = " + m21 + ", " + "M22 = " + m22 + ", sizingMethod = 'auto expand')"; styles['filter'] = styles['-ms-filter'] = iefilter; 

-O usa la carta vetrata CSS . Inoltre, questo applica lo stile di rotazione all'object window, che non ho mai effettivamente testato e non so se funziona o meno. Potrebbe essere necessario invece applicare lo stile a un elemento del documento.

Ad ogni modo, raccomanderei comunque semplicemente di visualizzare un messaggio che chiede all'utente di giocare in modalità verticale.

sembra strano che nessuno abbia proposto la soluzione di query media css:

 @media screen and (orientation: portrait) { ... } 

e l’opzione lo usa un foglio di stile specifico:

  

MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#orientation

Semplice codice Javascript per visualizzare il browser mobile in verticale o orizzontale ..

(Anche se devi inserire il codice html due volte nei due DIV (uno per ciascuna modalità), probabilmente questo caricherà più velocemente dell’uso di javascript per cambiare il foglio di stile …

 < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">    Mobile Device      
Portrait
Landscape

Testato e funziona su Android HTC Sense e Apple iPad.

Con le nuove funzionalità CSS3, è ansible ruotare la pagina all’orientamento opposto a cui sono state ruotate. Spiacente, nessun supporto IE7. :(.

 var rotate = 0 - window.orientation; setAttribute("transform:rotate("+rotate+"deg);-ms-transform:rotate("+rotate+"deg);-webkit-transform:rotate("+rotate+"deg)", "style"); 

È ansible utilizzare le proprietà screenSize.width e screenSize.height e rilevare quando width> height e quindi gestire tale situazione, facendo conoscere all’utente o regolando lo schermo di conseguenza.

Ma la soluzione migliore è ciò che @ Doozer1979 dice … Perché dovresti scavalcare ciò che l’utente preferisce?