Dall'archivio script > HTML5

Determinare l'orientamento del dispositivo con HTML5

di Matteo CasatiMatteo Casati, in HTML5, CSS3, Media queries,

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 mobile
https://www.aspitalia.com/focuson/1267/Speciale-Web-Mobile-Costruire-Applicazioni-ASP.NET-JQuery-Mobile.aspx

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi