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
Semplificare il deployment di siti statici con Azure Static Web App
Intercettare gli eventi di creazione degli oggetti con Entity Framework 7
Utilizzare gli snapshot con Azure File shares
Recuperare un elemento inserito nella cache del browser tramite API JavaScript
Definire lo stile CSS in base alle dimensioni del container
Dependency Injection e custom validator in Blazor con .NET 7.0
Effettuare il download di un file via FTP con la libreria FluentFTP di .NET
.NET 7 Live Q&A
Utilizzare flat e flatMap per appiattire array innestati in array
Ottenere il riferimento alla finestra che ha aperto un'altra finestra con HTML5 e JavaScript
Leggere e scrivere su cookie tramite Blazor
Accesso sicuro ai secrets attraverso i file in Azure Container Apps
I più letti di oggi
- .NET Conference Italia 2023 - Milano e Online
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Microsoft Visual Studio Code: un nuovo editor gratuito per Windows, MacOSX e Linux per sviluppatori ASP.NET e Node.js
- Registrare servizi multipli tramite chiavi in ASP.NET Core 8
- Chiamare direttamente un numero di telefono con HTML5