Ocultar barra de navegación en aplicaciones web móviles

Una regla en el desarrollo de aplicaiones web móviles es la de aprovechar siempre el máximo espacio que ofrecen las pantallas de los dispositivos, con iOS y Android empleando WebKit como motor de renderización en sus navegadores tienes la posibilidad de construir versiones de una web para posteriormente visualizarla como una aplicación nativa.

Con el siguiente código lograremos ocultar la barra de navegación cuando tengamos en pantalla nuestra web abierta:

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

El método window.scrollTo es la clave para esconder la barra de navegación. La función envolvente setTimeout es requerida por el dispositivo iPhone para poder ocultar la barra. El no usar setTimeout puede ocasionarnos algunos problemas.

Como bonus davidwalsh nos ofrece un truco a modo de que si un usuario añade nuestra aplicación web como favorita en su dispositivo, poder quitar de forma automática la barra de navegación, simplemente utilizando la siguiente metaetiqueta:

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

La barra de direcciones estará oculta hasta que el usuario recorra de abajo hacia arriba la aplicación. Con la barra de direcciones oculta, la aplicación web se verá exactamente como una aplicación nativa.