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

Question

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

probé dos métodos diferentes hasta ahora:

• El desplazamiento hacia abajo de un solo truco píxeles con Javascript al cargar la página

• Y las siguientes etiquetas meta:

  <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, se me olvidó algo muy importante: la página web en sí misma no desborda la ventana del navegador, probablemente la razón por la cual el truco de desplazamiento de 1 píxel no funciona.

No se puede hacer más grande, ya que el golpe cosa sobre el diseño, que cada uno puede desplazarse, pero esta página pliegues ... :)

Answer 1

Solo pulse este, si la barra de direcciones no se esconde, la razón puede ser simplemente que la página no es lo suficientemente larga para desplazarse.

Cuando el

window.scrollTo(0,1) 

se llama el MUST página ser más largo que la ventana para que pueda ocurrir un evento de desplazamiento. Solo cuando se produzca el desplazamiento, Safari móvil ocultará la barra de direcciones.

Answer 2

A menos que algo ha cambiado en los últimos versiones de iOS, el desplazamiento hacia abajo truco es el único que funciona de forma fiable, he tenido problemas con this version:

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

no importa cualquier otra plataforma móvil de esta página en particular, sin embargo, que fue basado en la reorientación de agente ... que Es posible que desee cambiar la expresión regular para verificar específicamente iPhone, por ejemplo reemplace /mobile/ con /iPhone/.

Answer 3

Sé que este hilo está comenzando a la edad, pero si usted vino aquí en busca de respuestas, trato:

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

si se utiliza jQuery, poner al final de $(document).ready(); El tiempo de espera permite que el navegador determinar la altura de la página ...

Answer 4

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

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

Answer 5

puede ejecutar la función cuando el contenido del sitio está listo en lugar de utilizar el tiempo de espera

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

Answer 6

Sé que esto es una entrada antigua, pero para responder a la pregunta, creo que no se resolverá a menos que el contenido es> que la ventana del navegador.

Aquí hay un código que ocultará la URL en carga, en el cambio de orientación y en una entrada táctil (la entrada táctil solo se debe usar si tiene una url oculta persistente, que es una lata de gusanos completa, si no, elimine esa parte del guión).

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); 
    }); 
} 

Answer 7

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

iPhone Configuring Web Applications

Answer 8

ACTUALIZACIÓN: de Apple removed apoyo a minimal-ui en iOS 8, de manera que esto ya no es una respuesta útil :(

---

Para los nuevos empleados de Google buscando en este : A partir del iOS 7.1 hay un nuevo minimal-ui modo que funciona en Safari móvil:

Se habilita al establecer la propiedad minimal-ui en la ventana gráfica:

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

También se puede utilizar en combinación con otras propiedades de esta manera:

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

De nota, no hay requisito de longitud de contenido mínimo como con el scrollTo pirateo. Hay una gran visión general de este nuevo modo here. (De ahí viene la imagen de arriba). También enumera algunas deficiencias.

La única documentación oficial que pude encontrar en esta es una nota en Apple's iOS 7.1 release notes:

Una propiedad, mínimo-ui, se ha añadido para la clave etiqueta meta de visualización que permite minimizar las barras superior e inferior de el iPhone mientras 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, ya esto sólo funciona en iOS 7.1 y anteriores, su utilidad puede ser limitada.

Answer 9

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

que tenían esto en mi CSS

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

Este css se aplica una solución a uno de los mis páginas, así que limita con una condición a esa página, y la barra de direcciones ahora está comportando correctamente en todo otras páginas