I browser moderni semplificano la personalizzazione di alcuni componenti, come le icone e il colore della barra degli indirizzi, e perfino l'aggiunta di riquadri personalizzati. Questi semplici ritocchi possono aumentare il coinvolgimento e invogliare gli utenti a tornare sul tuo sito.
I browser moderni semplificano la personalizzazione di alcuni componenti, come le icone e il colore della barra degli indirizzi, e perfino l'aggiunta di riquadri personalizzati. Questi semplici ritocchi possono aumentare il coinvolgimento e invogliare gli utenti a tornare sul tuo sito.
Fornire icone e riquadri efficaci
Quando un utente visita la tua pagina web, il browser tenta di recuperare un'icona dal codice HTML. L'icona potrebbe essere visualizzata in molti punti, tra cui la scheda del browser, il passaggio a un'app recente, la pagina della scheda Nuova (o visitata di recente) e altro ancora.
Un'immagine di alta qualità renderà il tuo sito più riconoscibile, rendendolo per consentire agli utenti di trovare più facilmente il tuo sito.
Per supportare completamente tutti i browser, devi aggiungere alcuni tag a <head>
di ogni pagina.
<!-- icon in the highest resolution we need it for -->
<link rel="icon" sizes="192x192" href="icon.png">
<!-- reuse same icon for Safari -->
<link rel="apple-touch-icon" href="ios-icon.png">
<!-- multiple icons for IE -->
<meta name="msapplication-square310x310logo" content="icon_largetile.png">
Chrome e Opera
Chrome e Opera utilizzano icon.png, che viene ridimensionato alle dimensioni necessarie
del dispositivo. Per impedire la scalabilità automatica, puoi fornire anche
dimensioni specificando l'attributo sizes.
Safari
Safari utilizza anche il tag <link> con l'attributo rel: apple-touch-icon per
indica l'icona della schermata Home.
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
L'ideale per l'icona apple-touch è un file PNG non trasparente di 180 px o quadrato di 192 px.
Non è consigliabile includere più versioni tramite l'attributo sizes.
In precedenza, Safari per iOS considerava la parola chiave -precomposed da evitare
l'aggiunta di effetti visivi, ma non è stato necessario da iOS 7.
Internet Explorer e Windows Phone
La nuova schermata Home di Windows 8 supporta quattro diversi layout per siti bloccati e richiede quattro icone. Puoi escludere il meta tag se non vuoi supportare una dimensione specifica.
<meta name="msapplication-square70x70logo" content="icon_smalltile.png">
<meta name="msapplication-square150x150logo" content="icon_mediumtile.png">
<meta name="msapplication-wide310x150logo" content="icon_widetile.png">
Riquadri in Internet Explorer
"Siti bloccati" di Microsoft e la rotazione di "Live Tiles" andare ben oltre le altre implementazioni e vanno oltre l'ambito di questa guida. Puoi scoprire di più dell'MSDN come creare riquadri animati.
Elementi del browser per colori
Utilizzando diversi elementi meta, puoi personalizzare il browser e
anche gli elementi della piattaforma. Tieni presente che alcune potrebbero funzionare solo in determinati
piattaforme o browser, ma possono migliorare notevolmente l'esperienza.
Chrome, Firefox OS, Safari, Internet Explorer e Opera Coast consentono di definire colori per elementi del browser e persino per la piattaforma che utilizza meta tag.
Colore meta-tema per Chrome e Opera
Per specificare il colore del tema per Chrome su Android, utilizza il colore meta del tema.
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
Stili specifici di Safari
Safari ti consente di modificare lo stile della barra di stato e di specificare un'immagine di avvio.
Specifica un'immagine di avvio
Per impostazione predefinita, Safari mostra una schermata vuota durante il tempo di caricamento e dopo vari
carica uno screenshot dello stato precedente dell'app. Per evitare che ciò accada,
dicendo a Safari di mostrare un'immagine di avvio esplicita, aggiungendo un tag link, con
rel=apple-touch-startup-image. Ad esempio:
<link rel="apple-touch-startup-image" href="icon.png">
L'immagine deve avere le dimensioni specifiche dello schermo del dispositivo di destinazione non verranno utilizzate. Consulta Linee guida per i contenuti web di Safari per ulteriori dettagli.
Sebbene la documentazione di Apple sia scarsa su questo argomento, la community degli sviluppatori ha trovato un modo per scegliere come target tutti i dispositivi utilizzando query supporti avanzate per seleziona il dispositivo appropriato e specifica l'immagine corretta. Ecco un soluzione funzionante, per gentile concessione della concreta di tfausak
Modificare l'aspetto della barra di stato
Puoi modificare l'aspetto della barra di stato predefinita in black o
black-translucent. Con black-translucent, la barra di stato è visualizzata in alto
dei contenuti a schermo intero, invece di spingerli verso il basso. In questo modo il layout
maggiore, ma ostruisce la parte superiore. Ecco il codice obbligatorio:
<meta name="apple-mobile-web-app-status-bar-style" content="black">
black-translucent
black