javascript - ocultas - ¿Cómo oculto la barra de direcciones en iPhone?

donde esta el album oculto en iphone (10)

A menos que algo haya cambiado 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);

Sin embargo, no me importaba ninguna otra plataforma móvil para esta página en particular, se estaba redireccionando según el agente ... es posible que desee cambiar la expresión regular para verificar el iPhone específicamente, por ejemplo, reemplazar /mobile/ con /iPhone/ .

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

He intentado dos métodos diferentes hasta ahora:

El truco de desplazamiento hacia abajo de un píxel con JavaScript en la página cargada
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.

PD: Oh, olvidé algo realmente importante: la página web en sí misma no desborda la ventana del navegador. Probablemente es la razón por la que el truco de desplazamiento de 1 píxel no funciona.

No puedo hacerlo más grande, ya que el tema del diseño es que todos pueden desplazarse, pero esta página se pliega ... :)

Acabo de golpear esto yo mismo. Si la barra de direcciones no se oculta, 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 la página DEBE ser más larga que la ventana para que pueda ocurrir un evento de desplazamiento.

Solo cuando ocurra el desplazamiento, el safari móvil ocultará la barra de direcciones.

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

Creo que nunca se resolverá a menos que el contenido sea más que la ventana del navegador.

Aquí hay un código que ocultará la URL en la carga, en el cambio de orientación y en un inicio táctil (el inicio táctil solo debe usarse si tiene una URL oculta persistente, que es una lata de gusanos, si no la tiene). eliminar esa parte de la secuencia de comandos).

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 se encuentre con un problema muy estrecho al que me enfrenté, esto es lo que me lo arregló.

Tuve esto en mi CSS

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

Este css aplica una solución solo a una de mis páginas, así que lo restringí con una condición a esa página, y la barra de direcciones ahora se está comportando correctamente en todas las demás páginas.

He estado buscando en esta aplicación web de pantalla completa y encontré esto.

http://www.onlywebpro.com/2015/07/19/optimizing-full-screen-mobile-web-app-for-ios/

1. Basicamente necesitas agregar lo siguiente en tu encabezado:

Abra el sitio en Safari
Toque el ícono "Abrir con" (flecha que apunta hacia arriba y el cuadro debajo de él) junto al botón de actualización en la barra de URL
Seleccione "Añadir a la pantalla de inicio"
Ve a la pantalla de inicio y abre el "Nombre de aplicación"
Voila! Sitio web sin barra de URL o botones de navegación!

Puede ejecutar la función cuando el contenido del sitio esté listo en lugar de usar el tiempo de espera

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

Tratar:

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

Si usa jQuery, póngalo al final de $(document).ready(); . El tiempo de espera permite que el navegador determine la altura de la página ...

ACTUALIZACIÓN: Apple removed soporte para minimal-ui en iOS 8, por lo que ya no es una respuesta útil :(

Para los nuevos usuarios de Google que buscan esto: a partir de iOS 7.1, hay un nuevo modo de minimal-ui usuario minimal-ui 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 puedes usarlo junto con otras propiedades como:

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

Es de destacar que no hay un requisito mínimo de longitud de contenido, ya que existe con el scrollTo hack. Hay una gran visión general de este nuevo modo here . (De ahí proviene la imagen de arriba.) También enumera algunas deficiencias.

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

Se ha agregado una propiedad, ui mínima, para la clave de metaetiqueta de la ventana gráfica que permite minimizar las barras superior e inferior del iPhone a medida que se carga la página. Mientras estás en una página usando ui mínimo, tocar la barra superior trae las barras de vuelta. Al volver a tocar en el contenido, se descartan de nuevo.
Por ejemplo, use <meta name="viewport" content="width=1024, minimal-ui”> .

Por supuesto, ya que 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