Contenido

Oculta la barra de navegación en Mobile Safari sin Javascript

3 Oct

aNieto2k hace 5363 días en: Apple, estandares, ipod, javascript, Programacion, web, webdev

+ 7

Mobile Safari es el navegador que nos encontramos en los iPhone/iPod Touch y sus aplicaciones web está revolucionando la navegación móvil de una forma espectacular. Hace unas semanas vimos como ocultar la barra de navegación usando Javascript y vimos que de esta forma agrandamos la parte visible de la página mostrando más información a usuario, algo realmente importante en este tipo de dispositivos.

Ahora via Ajaxian, descubro la forma de hacer mediante el uso de tags <meta /> en nuestro <head />:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />

Podemos ver una demo directamente desde este enlace.

  • Hugo Hugo

    @2 octubre 3rd, 2008 at 11:34 pm

    Perfecto, lo del JS era terrible porque a veces saltaba cuando ya estabas leyendo la página y te movía el scroll.

    Responder

  • adrian adrian

    @3 octubre 4th, 2008 at 12:33 am

    No es exactamente lo mismo, si he entendido bien (no lo he probado en el iPhone) también elimina la barra de «herramientas» de la parte inferior (lo de los favoritos y todo eso).

    Vamos, que con una interfaz adecuada, no habría forma de distinguir si es una web app o una nativa. No está mal.

    Responder

  • adrian adrian

    @4 octubre 4th, 2008 at 12:40 am

    Nada, efectivamente la captura de pantalla que tienen en Ajaxian no se corresponde con la realidad, y la barra sigue apareciendo en la parte de abajo.

    Lo que sí hace es impedir que el usuario pueda hacer zoom, algo que con el JavaScript no se podía hacer.

    Saludos.

    Responder

  • aNieto2k aNieto2k

    @5 octubre 4th, 2008 at 9:32 am

    @adrian: Lo de evitar hacer el zoom es por la primera línea que si te fijas, indica que el maximum-scale: 1.0 (osea que no hay zoom) si lo quitas o lo cambias a 2.0 o X.0, tendrás zoom.

    Responder

  • Hugo Hugo

    @6 octubre 4th, 2008 at 12:30 pm

    Vale, pues a mi esto no me funciona, he probado cambiando el «metas» ese plural que es bastante sospechoso y tampoco funciona. En Ajaxian comentan que puede que sean funciones nuevas del próximo firmware.

    Responder

  • josé josé

    @7 octubre 5th, 2008 at 8:04 am

    tengo un grave problema con mi web. No puede gestionarla desde hace unos días. Entro como administrador y me sale una página en blanco. ¿Hay alguien que me pueda ayudar?
    gracias

    Responder

Enlace permanente: Oculta la barra de navegación en Mobile Safari sin Javascript

Comentar

↑

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.

wordpress. themes wordpress.plugins wordpress.hacks Wordpress webkit usabilidad tweet themes Safari prototype plugins plugin PHP optimización Opera navegadores MooTools lightbox jquery.plugin jquery javascript itouch iphone internet explorer imagenes IE8 IE6 HTML5 HTML hack google.chrome google framework flash firefox3 firefox firebug estandares CSS3 CSS canvas ajax Accesibilidad 2.7 2.6