que - Ocultar los componentes de la interfaz de usuario de Safari en iPhone
safari no puede abrir la pagina porque tu iphone no esta conectado a internet (13)
En un intento por ocultar los componentes de la interfaz de usuario de Safari para una aplicación web marcada como un icono de pantalla de inicio. Estoy usando esta metaetiqueta
<meta name="apple-mobile-web-app-capable" content="yes" />
como se especifica en el iPhone Dev Center, pero la barra de direcciones y la barra de herramientas todavía están allí cuando se inician desde el icono de la pantalla de inicio. ¿Qué debo hacer diferente? ¿Alguien tiene un ejemplo?
<meta name="apple-mobile-web-app-capable" content="yes" />
funciona en iOS6 + Mobile Safari Browser pero SÓLO si agregó la página a su pantalla de inicio DESPUÉS de haber incluido la metaetiqueta en su sitio.
¿Se está lanzando desde la pantalla de inicio? La documentación en la página enlazada no menciona pero encontré esto @ Configurando Aplicaciones Web :
Por ejemplo, puede especificar un icono para su aplicación web utilizada para representarlo cuando se agrega a la pantalla de inicio, como se describe en "Especificación de un icono de página web para Web Clip". También puede minimizar la interfaz de usuario de Safari en iPhone , como se describe en "Cambiar la apariencia de la barra de estado" y "Ocultar los componentes de la interfaz de usuario de Safari" cuando se inicia su aplicación web desde la pantalla de inicio . Todos estos son ajustes opcionales que otras plataformas al ignorar cuando se agregan a su contenido web
Eso debería comportarse como se esperaba, lo he usado en el pasado sin ninguna dificultad.
¿Has intentado agregar ...
<meta name="apple-touch-fullscreen" content="yes" />
window.top.scrollTo(0, 1);
Funciona en iPhone, pero no en iPad. He tenido éxito ocultando los componentes del navegador en el iPad (así que presumiblemente en todas partes) usando
<meta name="apple-mobile-web-app-capable" content="yes" />
y lanzar desde un enlace de pantalla de inicio. También estoy usando
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
No he intentado ver si los componentes del navegador aún están ocultos si dejo fuera las propiedades de la ventana gráfica.
Por lo que puedo decir, iOS solo presta atención a las banderas cuando realmente agregas la aplicación. Si la cosa que es compatible con apple-mobile-web-app no funciona al principio, intente eliminar su aplicación de la pantalla de inicio y luego volver a agregarla.
He realizado algunos experimentos y he encontrado:
- la ubicación de la metaetiqueta dentro de los encabezados no parece importar (¡pensé que podría ser así!)
- después de agregar la aplicación y hacer que elimine la barra de direcciones correctamente, si luego quita las metaetiquetas de la página web, iOS continúa eliminando la barra de herramientas.
- incluso después de reiniciar el dispositivo todavía ''recuerda'' si eliminar la barra de herramientas. La única forma que he encontrado de restablecer este comportamiento es eliminar y volver a agregar la aplicación.
¡Espero que ayude!
<meta name="apple-mobile-web-app-capable" content="yes" />
Esto funcionará si:
- La etiqueta existe cuando la aplicación se agrega a la pantalla de inicio.
- La aplicación se inicia desde la pantalla de inicio.
todas las metaetiquetas anteriores y window.scrollTo, no funcionó en ipad para mí, encontré un botón en safari junto a marcadores en el que aparece la opción llamada ''Agregar a pantalla de inicio'' que crea un nuevo ícono de mosaico, y puede iniciar su aplicación web como una aplicación nativa y sin barra de direcciones allí.
Sé que esto es bastante viejo, pero me encontré con esto mientras buscaba una solución. Pude arreglar esto agregando también:
window.top.scrollTo(0, 1);
al método de carga del cuerpo. Espero que ayude a cualquiera que se encuentre con esto.
Desde iOS 7.1, puedes usar minimal-ui
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
Hay una nueva directiva, llamada "minimal-ui" que el navegador iOS tiene en cuenta (al menos en el iPhone donde probé). Las barras de herramientas están ocultas hasta que el usuario haga clic en la barra de estado en la parte superior. Muy bueno para aplicaciones de una página!
Aquí está el fragmento que uso:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
Prueba esto
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width; user-scalable=0;">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" href="icon.png">