Anche se il trend attuale è quello di creare applicazioni native per i dispositivi mobile, le normali applicazioni HTML possono integrarsi facilmente con i device, sfruttando una serie di tag ad hoc, che adatteranno l'icona che viene messa nella start/home screen dei vari device, oltre ad alcuni dettagli, che variano da browser a browser.
L'idea è che queste funzionalità vadano a completare quanto già disponibile sul desktop, attraverso l'icona disponibile attraverso favicon.ico.
Con iOS, è necessario fornire un'immagine in formato 144x144 PNG, attraverso questo tag:
<link rel="apple-touch-icon" href="http://gui.html5italia.com/images/ASPItalia/logo_144x144.png" />
All'imagine specificata verrà applicato un effetto tipico delle icone iOS, che può essere evitato semplicemente cambiando il tag in questo modo:
<link rel="apple-touch-icon-precomposed" href="http://gui.html5italia.com/images/ASPItalia/logo_144x144.png" />
iOS può anche personalizzare il modo in cui appare la nostra app, consentendoci di specificare un'immagine di startup:
<link rel="apple-touch-startup-image" href="/startup.png" />
o il colore di background della status bar, che può anche essere nascosta:
<meta name="apple-mobile-web-app-status-bar-style" content="#7F0000" /> <meta name="apple-mobile-web-app-capable" content="yes" />
Queste header aiutano il browser a far apparire la nostra app come se fosse (quasi) nativa su iOS.
Su IE e Windows, invece, i tag corrispondenti sono questi:
<meta name="application-name" content="Html5Italia.com"/> <meta name="msapplication-tooltip" content="Html5Italia.com | ASPItalia.com Network"/> <meta name="msapplication-starturl" content="https://www.html5italia.com/"/> <meta name="msapplication-window" content="width=1024;height=768"/> <meta name="msapplication-navbutton-color" content="7F0000"/>
In IE (dalla 8 in su) possiamo decidere la pagina da cui partire quando si fa il pinning dell'applicazione sulla task bar, la dimensione iniziale della finestra e il colore di sfondo della freccia back.
Infine, IE 10 introduce la possibilità di integrarsi con le tile di Windows 8. In questo caso, si possono specificare un URI per avere un contatore nella tile (necessita dell'XML associato ad un tile, reperibile nell'SDK), l'immagine di sfondo (144x144 PNG) ed un colore di sfondo della tile:
<meta name="msapplication-badge" value="frequency=60;polling-uri=http://myrui" /> <meta name="msapplication-TileImage" content="http://gui.html5italia.com/images/ASPItalia/logo_144x144.png"/> <meta name="msapplication-TileColor" content="#7F0000"/>
Questi accorgimenti ci consentono di integrare il nostro sito in maniera più completa all'interno dei vari browser, migliorando la fruibilità da parte dell'utente.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Gestione dei nomi con le regole @layer in CSS
Aprire una finestra di dialogo per selezionare una directory in WPF e .NET 8
Persistere la ChatHistory di Semantic Kernel in ASP.NET Core Web API per GPT
Miglioramenti nell'accessibilità con Angular CDK
Filtering sulle colonne in una QuickGrid di Blazor
Evitare il flickering dei componenti nel prerender di Blazor 8
Gestire la cancellazione di una richiesta in streaming da Blazor
Esportare ed analizzare le issue di GitHub con la CLI e GraphQL
Eseguire query manipolando le liste contenute in un oggetto mappato verso una colonna JSON
Definire stili a livello di libreria in Angular
.NET Conference Italia 2024
Utilizzare il metodo CountBy di LINQ per semplificare raggruppamenti e i conteggi
I più letti di oggi
- Effettuare il download di un file via FTP con la libreria FluentFTP di .NET
- Debug di app .NET tramite snapshot con Application Insight
- Utilizzare le Fullscreen API di HTML5 in IE11
- Proteggere l'accesso ad una Azure Web e API App tramite Google
- Utilizzare .NET Core con le Azure Function
- Effettuare il redirect da HTTP a HTTPS con la Azure CDN
- Creare un package MTS con uno script ASP
- Autenticazione con Minimal API di ASP.NET Core 6
- Routing HTTP con i proxy delle Azure Function
- Convidere una share di rete tra VM di Azure