Nello script #7 (https://www.html5italia.com/script/7/Gestione-Avanzata-CSS-CSS3-Media-Queries.aspx) abbiamo visto come sia possibile utilizzare Media Query di CSS3 per gestire lo stile della pagina in base alla risoluzione dello schermo e all'orientamento del dispositivo; in molti casi questo risulta sufficiente per adattare il layout dell'applicazione al display. In alcuni scenari potrebbe però essere necessario intervenire in modo più profondo per garantire la massima fruibilità dell'applicazione (ad esempio modificando il DOM). A questo scopo il W3C sta definendo le specifiche per la gestione degli eventi relativi all'orientamento e al movimento del dispositivo ("DeviceOrientation Event Specification" - http://www.w3.org/TR/orientation-event/)
Nell'esempio che segue, al caricamento del DOM, viene invocata la funzione detectOrientation per determinare l'orientamento attuale; la stessa funzione viene poi utilizzata come handler per l'evento orientationchange per rilevare il cambio di orientamento (in questo caso viene semplicemente visualizzata l'indicazione "portrait" o "landscape" all'interno del div con ID "currentOrientation"):
<!doctype html> <html> <head> <title>Device Orientation</title> <script> document.addEventListener("DOMContentLoaded", function() { window.addEventListener("orientationchange", detectOrientation, true); detectOrientation(); }, true); function detectOrientation() { switch (window.orientation) { case 0: case 180: // landscape document.getElementById("currentOrientation").innerHTML = "Landscape"; break; case 90: case -90: // portrait document.getElementById("currentOrientation").innerHTML = "Portrait"; break; default: return; } } </script> </head> <body> <div id="currentOrientation"></div> </body> </html>
Nota: al momento non tutti i produttori implementano queste specifiche: l'evento orientationchange ad esempio è disponibile in Safari Mobile iOS (iPhone, iPad, ecc.) e in Android Browser ma non in Internet Explorer per Windows Phone. In questo caso è possibile intercettare l'evento window.onresize e determinare, sulla base di altezza e larghezza, l'orientamento del device.
Le API del W3C prevedono inoltre la possibilità di conoscere l'esatta posizione del dispositivo nello spazio rispetto ai 3 assi mediante l'evento deviceorientation:
window.addEventListener("deviceorientation", function(event) { document.getElementById("currentOrientation").innerHTML = "alpa: " + event.alpha + "<br>" + "beta: " + event.beta + "<br>" + "gamma: " + event.gamma; }, true);
Se è richiesta la ricalibrazione della bussola viene sollevato l'evento compassneedscalibration:
window.addEventListener("compassneedscalibration", function(event) { alert("Ricalibra la bussola muovendo il dispositivo così da formare un otto in aria"); event.preventDefault(); }, true);
Infine è possibile intercettare il movimento del dispositivo tramite l'evento devicemotion:
window.addEventListener("devicemotion", function(event) { document.getElementById("currentOrientation").innerHTML = "acceleration.x: " + event.acceleration.x + "<br>" + "acceleration.y: " + event.acceleration.y + "<br>" + "acceleration.z: " + event.acceleration.z + "<br>" + "accelerationIncludingGravity.x: " + event.accelerationIncludingGravity.x + "<br>" + "accelerationIncludingGravity.y: " + event.accelerationIncludingGravity.y + "<br>" + "accelerationIncludingGravity.z: " + event.accelerationIncludingGravity.z + "<br>" + "... (omissis: event.rotationRate and event.interval)"; }, true);
Attraverso queste API di HTML5 è quindi possibile accedere tramite JavaScript a caratteristiche specifiche del dispositivo come la bussola e l'accelerometro rendendo possibile la realizzazione di soluzioni complesse direttamente nel browser (come ad esempio il controllo di un gioco attraverso il movimento del telefono) altrimenti possibili solo in applicazioni native.
Link e riferimenti utili
Il nostro speciale sullo sviluppo web mobilehttps://www.aspitalia.com/focuson/1267/Speciale-Web-Mobile-Costruire-Applicazioni-ASP.NET-JQuery-Mobile.aspx
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Eseguire query verso tipi non mappati in Entity Framework Core
Verificare la provenienza di un commit tramite le GitHub Actions
Migrare una service connection a workload identity federation in Azure DevOps
Utilizzare domini personalizzati gestiti automaticamente con Azure Container Apps
Sfruttare i KeyedService in un'applicazione Blazor in .NET 8
Utilizzare politiche di resiliency con Azure Container App
Miglioramenti agli screen reader e al contrasto in Angular
Recuperare un elemento inserito nella cache del browser tramite API JavaScript
Determinare lo stato di un pod in Kubernetes
Elencare le container images installate in un cluster di Kubernetes
Utilizzare Tailwind CSS all'interno di React: installazione
Utilizzare i primary constructor in C#
I più letti di oggi
- PWAConf 2020 - Online
- Effettuare il binding di date in Blazor
- What's new in Azure Functions and Extensions
- Mantenere sempre reattiva una Lambda di AWS
- Proteggersi dagli attacchi di Open Redirect in ASP.NET Core MVC
- Gestire errori funzionali tramite exception in ASP.NET Core Web API
- Sblocca le performance della tua applicazione con .NET 8