widgets organizar inicio home desactivar crear control como centro carpetas boton assistive archivos apps html html5 height meta-tags iphone-web-app

html - inicio - organizar apps iphone



Altura de montaje de la aplicación de pantalla de inicio para iPhone 5 (5)

Aquí hay algunas buenas respuestas para este problema, publicadas por otros sobre el mismo tema:

Tengo problemas para ajustar la altura de una aplicación web (pantalla de inicio). Estoy usando la siguiente meta-etiqueta:

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

Mi problema es que la pantalla tiene barras negras en la parte superior e inferior. Primero pensé, que este es un error del iPhone 5 debido a la pantalla superior. Pero hoy vi una aplicación web (apps.ft.com/), que encaja perfectamente en la pantalla del iPhone5.

Cualquier idea, ¿qué estoy haciendo mal?

aquí mis etiquetas meta relevantes

<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="apple-touch-icon-precomposed" href="img/icons/ios_icon_52.png"> <link rel="apple-touch-icon" href="img/icons/ios_icon_52.png"> <link rel="apple-touch-icon" sizes="72x72" href="img/icons/ios_icon_72.png"> <link rel="apple-touch-icon" sizes="114x114" href="img/icons/ios_icon_114.png">

EDITAR: Después de una hora de búsqueda, encontré la solución de cómo forzar el navegador para que se ajuste a su altura máxima. Mi iPhone solo se ajusta a la altura cuando defino una imagen de inicio (apple-touch-startup-image). Aquí mi código:

<!-- iPhone 4 (Retina) --> <link href="img/icons/apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <!-- iPhone 5 --> <link href="img/icons/apple-touch-startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

Eliminar completamente el ancho de la ventana gráfica causa más problemas de los que resuelve. Para que las aplicaciones web tengan la altura correcta de la ventana gráfica, el ancho de la ventana gráfica debe ser mayor que 320 (que, desafortunadamente, es el valor que device-width reporta al navegador). Así es como he actualizado mi meta tag viewport:

<meta name="viewport" content="width=320.1, user-scalable=0, initial-scale=1.0" />

Luché con esto durante horas también, hasta que finalmente encontré que era la definición de "ancho" en la etiqueta de mi ventana gráfica la que estaba causando el problema. Eliminar el ancho solucionó el problema para mí.

También tuve este problema y lo resolví eliminando width = device-width