¿Cómo ocultar la barra de direcciones en iPhone?

Tengo una especie de pregunta fácil: ¿cómo ocultar la barra de direcciones en el iPhone?

Intenté dos methods diferentes hasta ahora:

  • Desplazarse hacia abajo un truco de píxeles con Javascript en la carga de la página

  • Y las siguientes metatags:

    <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" /> 

también esto:

 <meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 

Estoy completamente confundido. ¡Cualquier consejo sería muy apreciado!

PD: Ah, me olvidé de algo realmente importante: la página web en sí misma no se desborda de la window del browser, probablemente sea la razón por la cual el truco de desplazamiento de 1 píxel no funciona.

No puedo hacerlo más grande, ya que lo mejor del layout es que todos pueden desplazarse, pero esta página se dobla … 🙂

Solo presiona esto, si la barra de direcciones no está oculta, la razón puede ser simplemente que la página no es lo suficientemente larga para desplazarte.

Cuando el

 window.scrollTo(0,1) 

se llama la página DEBE ser más larga que la window para que pueda ocurrir un evento de desplazamiento. Solo cuando el desplazamiento se produzca, Safari mobile ocultará la barra de direcciones.

A less que haya cambiado algo en las últimas versiones de iOS, el truco de desplazamiento hacia abajo es el único que funciona de manera confiable, no he tenido problemas con esta versión :

 /mobile/i.test(navigator.userAgent) && !location.hash && setTimeout(function() { window.scrollTo(0, 1); }, 1000);​ 

No me importaba ninguna otra plataforma mobile para esta página en particular, sin embargo, estaba networkingirigiendo en function del agente … es posible que desee cambiar la expresión regular para verificar específicamente iPhone, por ejemplo, /mobile/ replace /mobile/ with /iPhone/ .

Creo que esta versión es en realidad mejor. Prueba para ver si el usuario ya ha comenzado a desplazarse, que es un problema que noté en mi proyecto mobile.

 /Mobile/.test(navigator.userAgent) && !location.hash && setTimeout(function () { if (!pageYOffset) window.scrollTo(0, 1); }, 1000); 

ACTUALIZACIÓN: Apple eliminó el soporte para minimal-ui en iOS 8 por lo que ya no es una respuesta útil 🙁


Para los nuevos usuarios de Google que investigan esto: a partir de iOS 7.1 hay un nuevo modo minimal-ui que funciona en Safari mobile:

minimal-ui

Se habilita estableciendo la propiedad minimal-ui en la window gráfica:

 <meta name="viewport" content="minimal-ui"> 

También puede usarlo junto con otras properties como estas:

 <meta name="viewport" content="width=device-width, minimal-ui"> 

Es de destacar que no existe un requisito mínimo de longitud de contenido, como scrollTo con scrollTo hack. Hay una gran visión general de este nuevo modo aquí . (De ahí viene la image de arriba). También enumera algunas deficiencias.

La única documentation oficial que pude encontrar sobre esto es una nota en las notas de la versión iOS 7.1 de Apple :

Se ha agregado una propiedad, minimal-ui, para la key de metalabel de la window gráfica que permite minimizar las barras superior e inferior en el iPhone a medida que se carga la página. Mientras estás en una página usando minimal-ui, tocar la barra superior trae las barras hacia atrás. Tocando hacia atrás en el contenido los descarta nuevamente.

Por ejemplo, use <meta name="viewport" content="width=1024, minimal-ui”> .

Por supuesto, como esto solo funciona en iOS 7.1 y superior , su utilidad puede ser limitada.

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

iPhone Configurando Aplicaciones Web

Sé que este hilo está empezando a envejecer, pero si viniste buscando respuestas, intenta:

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

si usa jQuery, coloque al final de $(document).ready(); El time de espera permite que el browser determine la altura de la página …

Puede ejecutar la function cuando el contenido del sitio esté listo en lugar de utilizar el time de espera

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

Sé que esta es una publicación anterior, pero para responder a la pregunta, creo que nunca se resolverá a less que el contenido sea> que la window del browser.

Aquí hay un código que ocultará la URL en carga, en el cambio de orientación y en una input táctil (la input táctil solo se debe usar si tiene una url oculta persistente, que es otra lata de gusanos, si no lo hace, eliminar esa parte de la secuencia de commands).

 if( !window.location.hash && window.addEventListener ){ window.addEventListener( "load",function() { setTimeout(function(){ window.scrollTo(0, 0); }, 0); }); window.addEventListener( "orientationchange",function() { setTimeout(function(){ window.scrollTo(0, 0); }, 0); }); window.addEventListener( "touchstart",function() { setTimeout(function(){ window.scrollTo(0, 0); }, 0); }); } 

En caso de que ninguna de estas soluciones funcione y te encuentres con el problema tan pequeño que enfrenté, esto es lo que me solucionó.

Tenía esto en mi CSS

 html{position: relative; height 100%; overflow: hidden;} 

Este css aplica una corrección a una de mis páginas solamente, por lo que la restringí con una condición a esa página, y ahora la barra de direcciones se comporta correctamente en todas las demás páginas.