Per sapere se il dispositivo mobile, con il quale un utente sta visualizzando il nostro sito, sia posto in verticale (portrait) o in orizzontale (landscape) è sufficiente una semplice riga di codice Javascript.
Ma perché potrebbe esserci utile saperlo?
A livello generale, dal momento in cui ottimizziamo un sito per dispositivi mobili, questo dovrebbe vedersi bene in entrambi gli orientamenti e senza il bisogno di apportare specifiche modifiche ad un orientamento piuttosto che a un altro.
Tuttavia, a volte può capitare l’esigenza di dover far visualizzare una pagina solo verticalmente o solo orizzontalmente.
Per far questo potrebbe venire in mente l’idea di bloccare l’orientamento del dispositivo, in modo da impedire che la pagina si adatti in automatico al variare di tale orientamento. Così facendo la pagina rimarrebbe sempre fissa indipendentemente da come il dispositivo viene girato.
Il problema è che per le pagine web questo non è possibile, o perlomeno, la questione sarebbe molto più complessa di quello che si può pensare.
Quello che possiamo fare però, è nascondere il contenuto nell’orientamento in cui non vorremmo che la pagina venisse visualizzata, mostrando al suo posto un messaggio come ad esempio “Per favore, gira il dispositivo”.
Creare l’elemento per nascondere il contenuto
Per far questo, iniziamo a creare quindi l’elemento nel codice HTML che agirà come una maschera del contenuto della nostra pagina, coprendolo totalmente e mostrando l’avviso di cambiare l’orientamento del dispositivo.
[code_snippet y=”2016″ name=”determinare-orientamento-dei-dispositivi-mobili” id=”1″]
L’elemento dovrà avere posizionamento fisso e occupare tutto lo schermo in larghezza e altezza, cosa che faremo poi nei CSS.
Per rendere la cosa un po’ più simpatica, oltre al messaggio andremo ad aggiungere anche un’icona animata, gestita dalla classe turn-icon.
Controllare l’orientamento del dispositivo
Ora creiamo una funzione con jQuery che servirà appunto a determinare l’orientamento dello smartphone o tablet.
[code_snippet y=”2016″ name=”determinare-orientamento-dei-dispositivi-mobili” id=”2″]
Se l’altezza dello schermo sarà maggiore della lunghezza, il dispositivo avrà ovviamente un orientamento verticale, quindi in questo caso potremo rendere visibile il nostro elemento maschera.
Inoltre, con un secondo di ritardo, chiamiamo una funzione che aggiungerà una seconda classe a turn-icon (ossia la classe relativa all’icona) per far ruotare l’icona.
Assegnare gli stili all’elemento
Come ultima cosa assegniamo gli stili a #turn-device e agli elementi in esso contenuti.
[code_snippet y=”2016″ name=”determinare-orientamento-dei-dispositivi-mobili” id=”3″]
Affinché il nostro div funga davvero da maschera della pagina esso dovrà:
- essere in posizione fissa
- avere altezza e larghezza al 100%
- avere un colore di sfondo (non deve essere trasparente)
- avere uno z-index superiore a qualsiasi altro
- essere nascosto perché sarà la nostra funzione Javascript a stabilire la sua visibilità
Richiamare il controllo dell’orientamento
D’accordo, gli stili non erano proprio l’ultima cosa… Nel nostro tag di apertura body, richiamiamo la funzione detect_orientation, sia all’evento onload che onorientationchange, altrimenti tutto quello fatto finora sarà servito a ben poco!
[code_snippet y=”2016″ name=”determinare-orientamento-dei-dispositivi-mobili” id=”4″]
In questo tutorial abbiamo visto come impedire la visualizzazione della pagina in un dispositivo mobile con orientamento orizzontale, ma semplicemente invertendo da maggiore a minore il segno contenuto nella condizione della funzione detect_orientation potremo impedire la visualizzazione della pagina verticale.
