Per sapere\u00a0se il dispositivo mobile, con il quale un utente sta visualizzando il nostro sito, sia posto in verticale (portrait)\u00a0o\u00a0in orizzontale (landscape) \u00e8 sufficiente\u00a0una\u00a0semplice riga di codice Javascript.<\/p>\n
Ma perch\u00e9 potrebbe esserci utile saperlo?<\/strong><\/p>\n A livello generale, dal\u00a0momento in cui ottimizziamo un sito per dispositivi mobili, questo dovrebbe vedersi bene in\u00a0entrambi gli orientamenti e senza il bisogno di apportare specifiche modifiche ad un orientamento piuttosto che a un altro.<\/p>\n Tuttavia, a volte pu\u00f2 capitare l’esigenza di dover far visualizzare una\u00a0pagina solo verticalmente o solo orizzontalmente.<\/p>\n Per far questo potrebbe venire in mente l’idea di bloccare l’orientamento del dispositivo<\/strong>, in modo da impedire che la pagina si adatti in automatico al variare di tale orientamento. Cos\u00ec facendo la pagina rimarrebbe sempre fissa indipendentemente da come il dispositivo viene girato.<\/p>\n Il problema \u00e8 che per le pagine web questo non \u00e8 possibile, o perlomeno, la questione\u00a0sarebbe molto pi\u00f9 complessa di quello che si pu\u00f2 pensare.<\/p>\n Quello che possiamo fare per\u00f2, \u00e8 nascondere il contenuto<\/strong> nell’orientamento in cui non vorremmo\u00a0che la pagina venisse\u00a0visualizzata, mostrando al suo posto un messaggio come ad esempio “Per favore, gira il dispositivo”.<\/p>\n Per far questo, iniziamo a creare quindi l’elemento nel codice HTML che agir\u00e0 come una maschera del contenuto della nostra pagina, coprendolo totalmente e\u00a0mostrando l’avviso di cambiare\u00a0l’orientamento del dispositivo.<\/p>\n [code_snippet y=”2016″\u00a0name=”determinare-orientamento-dei-dispositivi-mobili” id=”1″]<\/p>\n L’elemento dovr\u00e0 avere\u00a0posizionamento fisso e occupare tutto lo schermo in larghezza e altezza, cosa che faremo poi nei CSS.<\/p>\n Per rendere la cosa un po’ pi\u00f9 simpatica, oltre al messaggio andremo ad aggiungere\u00a0anche un’icona animata, gestita dalla classe turn-icon<\/em>.<\/p>\n Ora creiamo una funzione con jQuery che servir\u00e0 appunto a determinare l’orientamento dello smartphone o tablet.<\/p>\n [code_snippet y=”2016″\u00a0name=”determinare-orientamento-dei-dispositivi-mobili” id=”2″]<\/p>\n Se l’altezza dello schermo sar\u00e0 maggiore\u00a0della lunghezza, il dispositivo avr\u00e0 ovviamente un orientamento verticale, quindi in questo caso potremo rendere visibile il nostro elemento maschera.<\/p>\n Inoltre, con un secondo di ritardo, chiamiamo una funzione che aggiunger\u00e0 una seconda classe a turn-icon<\/em> (ossia la classe relativa all’icona) per far ruotare l’icona.<\/p>\n Come ultima cosa assegniamo gli stili a\u00a0#turn-device<\/em> e agli elementi in esso contenuti.<\/p>\n [code_snippet y=”2016″\u00a0name=”determinare-orientamento-dei-dispositivi-mobili” id=”3″]<\/p>\n Affinch\u00e9 il nostro div<\/em> funga davvero da maschera della pagina esso dovr\u00e0:<\/p>\nCreare l’elemento per nascondere il contenuto<\/h2>\n
Controllare l’orientamento del dispositivo<\/h2>\n
Assegnare gli stili all’elemento<\/h2>\n