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”.
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.
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.
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à:
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.
Se sei un appassionato di oggetti da collezione, è probabile che tu abbia già sentito…
Se ne soffri la conosci e se non ne soffri, invece, sarebbe meglio conoscerla per…
Da sempre l’uomo è rimasto affascinato e si è interessato alla magia. Che sia nella…
Il contratto di locazione a canone concordato è una forma di locazione in cui la misura del…
Negli ultimi anni, soprattutto da dopo la pandemia, sempre più italiani si sono rivolti a…
Stai pensando di abbellire il tuo giardino installando una piscina di ultima generazione? Se la…