Grazie alla fullscreen API di HTML5 è possibile offrire una user experience di tipo "immersive" anche nelle web application.
In particolari applicazioni, potrebbe essere necessario occupare tutto lo spazio disponibile sullo schermo, rimuovendo i bordi della finestra del browser, privilegiando il contenuto (come ad esempio un magazine o un video) e riadattandolo ad una modalità più idonea alla visualizzazione, magari nascondendo alcuni elementi del documento in favore di altri.
Per richiedere il passaggio alla modalità fullscreen del browser, è sufficiente richiamare il metodo requestFullscreen come di seguito illustrato:
$("#btnFull").bind('click', function(){ var docElm = document.documentElement; if (docElm.requestFullscreen) { docElm.requestFullscreen(); } else if (docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); } else if (docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen(); } });
A questo punto Il browser, per facilitare all'utente il ritorno alla modalità standard, visualizzerà delle istruzioni (personalizzate per vendor). Per convenzione la pressione del tasto Esc dovrebbe forzare il ritorno alla modalità standard, tuttavia è possibile farlo anche programmaticamente da un controllo ad-hoc richiamando il metodo exitFullscreen.
L'API prevede anche la possibilità di sottoscrivere l'evento sollevato durante la commutazione dalla modalità standard a fullscreen e viceversa:
document.addEventListener("fullscreenchange", function () { $("#navigation).toggle(!document.fullscreen); }, false);
Infine è possibile applicare stili differenti agli elementi della pagina, a seconda della modalità di visualizzazione impostata, semplicemente ricorrendo ad una pseudo-classe CSS come di seguito illustrato:
html:fullscreen { background: black; }
La specifica completa è disponibile qui: http://www.w3.org/TR/fullscreen/
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Usare lo spread operator con i collection initializer in C#
Generare HTML a runtime a partire da un componente Razor in ASP.NET Core
Creare una libreria CSS universale: Clip-path
Eseguire query verso tipi non mappati in Entity Framework Core
Configurare il nome della run di un workflow di GitHub in base al contesto di esecuzione
Utilizzare QuickGrid di Blazor con Entity Framework
Definire stili a livello di libreria in Angular
Ottimizzare il mapping di liste di tipi semplici con Entity Framework Core
Gestire la cancellazione di una richiesta in streaming da Blazor
Disabilitare automaticamente un workflow di GitHub
Autenticarsi in modo sicuro su Azure tramite GitHub Actions
I più letti di oggi
- Utilizzare AAD su SQL Database durante lo sviluppo con Visual Studio
- Utilizzare il TransferControl in Windows Phone
- Gestione dei token negli input di testo con la Universal Windows Platform
- Dare temporaneamente accesso ad un blob di Azure Storage
- Impostare le policy CORS con Azure API Management
- Utilizzare database e servizi con gli add-on di Container App
- Utilizzare HttpModule in modalità asincrona
- Indicizzare i Blob Storage con Azure Search
- Creazione di StateTrigger personalizzati in Universal Windows Platform
- Modificare i criteri della clausola Where del LinqDataSource di ASP.NET