Corsi on-line

Siti ottimizzati per iPhone e iPad: nascondere la barra degli indirizzi di Safari

Nella creazione di pagine web ottimizzate per la visualizzazione su smartphone diventa assolutamente necessario gestire in modo ottimale il (poco) spazio a disposizione. Un trucchetto interessante, che consente di guadagnare 60 pixel in altezza, consiste nel nascondere (dopo il caricamento della pagina) la barra degli indirizzi di Safari Mobile.

Ovviamente la barra tornerà ad essere disponibile per l’utente mediante il semplice scrolling della pagina.

Per realizzare questo effetto è sufficiente aggiungere poche righe di codice Javascript all’interno delle nostre pagine web "mobile friendly":

// Al caricamento della pagina
window.addEventListener("load",function() {
  setTimeout(function(){
    window.scrollTo(0, 1);
  }, 0);
});

Se usate jQuery, in alternativa, potete scrivere:

$(window).load(function(){
  setTimeout(function(){
    window.scrollTo(0, 1);
  }, 0);
});

Per fare un lavoro perfetto, tuttavia, è necessario aggiungere anche una condizione al caricamento di questo codice che verifichi, effettivamente, se il browser è Safari in versione Mobile. Vediamo, quindi, il codice completo:

if ('standalone' in navigator && !navigator.standalone && (/iphone|ipod|ipad/gi).test(navigator.platform) && (/Safari/i).test(navigator.appVersion)) {
  $(window).load(function(){
    setTimeout(function(){
      window.scrollTo(0, 1);
    }, 0);
  });
}

Un altro sistema per nascondere la barra degli indirizzi consiste nell’aggiungere il seguente meta-tag:

<meta name="apple-mobile-web-app-capable" content="yes" />

tuttavia conviene prestare molta attenzione nell’utilizzo di questa dichiarazione, in quanto rimuoverà completamente tutte le barre di Safari rendendo inaccessibili, tra gli altri, i pulsanti di navigazione (avanti e indietro). L’utilizzo di questo met-tag, pertanto, è consigliato sono per le web-app in cui il sistema di navigazione è stato ricreato dallo sviluppatore all’interno dell’interfaccia utente.

Post correlati
I più letti del mese
Tematiche