PREGUNTA: Basado en los ejemplos de pantalla de inicio de aplicaciones web en iOS7 Safari, ¿cómo puedo obtener un fijo persistente encabezado que nunca se desplaza fuera de la vista, y la forma de campos de entrada que desplazarse a la vista cuando se toca?

Los dos ejemplos que tienen una diferencia, uno tiene height=device-height en el viewport, el otro no.


Sin dispositivo de altura

<meta id="viewport" name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1" />

Demo: http://run.plnkr.co/plunks/SU8Csk/

Link De Edición: http://plnkr.co/edit/SU8Csk

Fijo persistente encabezado y desplácese hasta centrado campos de entrada

La buena: El encabezado fijo no cambia de posición/altura al tocar los campos.

Lo malo: El usuario no puede ver el centrado de campo sin manualmente el desplazamiento, o pulsando el botón ‘siguiente’. Esto puede ser muy tedioso, especialmente si los campos en una página que no se desborde.


Con dispositivo de altura

<meta id="viewport" name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1, minimum-scale=1" />

Demo: http://run.plnkr.co/plunks/rPoyaB/

Link De Edición: http://plnkr.co/edit/rPoyaB

Fijo persistente encabezado y desplácese hasta centrado campos de entrada

La buena: El usuario se desplaza a la enfocada campos como desee.

Lo malo: El encabezado fijo se desplaza completamente fuera de la vista, esto tiene que ser persistente en la pantalla en todo momento. El escenario es, contendrá un botón «cancelar» y un botón de guardar, que siempre deben ser accesibles. También cuando el campo es borrosa, la misma cabecera se ve aplastado hasta que el usuario se desplaza hacia abajo en la vista, pero si de desbordamiento está desactivado, entonces ellos no pueden hacer esto.

El feo: En mi no-trivial, código real, lejos de estos ejemplos simplificados, hay un montón de elementos que están posicionados absolutamente dentro de la cabecera, para crear una línea curva ‘ficha’ efecto, la alineación de estos va completamente apagado.


Usted debe ser capaz de abrir cada demo URL en iOS7 Safari, añadir a Pantalla de Inicio y la fecha de lanzamiento para demostrar el problema.

¿Cuál es la mejor manera de resolver esto?

NOTA: soy consciente de que hay ‘bugs’ en iOS7 Safari, particularmente cuando se trata de la pantalla de aplicaciones web, sin embargo, creo que una
solución puede existir sobre cómo me
soy la estructuración de la página. He hecho una gran cantidad de investigación (ver
abajo), pero estoy luchando para encontrar una solución.

Enlaces relacionados a fijo ‘cabecera’ asunto: Necesidad Encabezado Fijo en ios7+, ¿Cómo obtener un encabezado fijo a permanecer en la parte superior de la página?,
Fija los encabezados con los campos de texto en el móvil de safari sitios web,
iOS 5 fija el posicionamiento y el teclado virtual,
Problemas con la fija de encabezado, pie de página y la barra lateral en el ipad /iphone,
CSS «position: fixed;» en el iPad/iPhone?,
Fija el posicionamiento en Mobile Safari,
¿Cómo puedo detener mi navegación fija de movimiento como este, cuando se abre el teclado virtual en Mobile Safari?,
aplicación web – dispositivo-altura /problema del teclado,
Elemento Div no se queda en la parte inferior cuando ios 7 teclado virtual está presente,
iOS web de la aplicación: desactivar el enfoque automático en el campo de entrada de texto, desapareciendo la posición de encabezado fijo en ios7 mobile safari,
http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios/,
https://github.com/jquery/jquery-mobile/issues/5532,
http://dansajin.com/2012/12/07/fix-position-fixed/

Enlaces relacionados a la » entrada de los campos no se enfocan al tema: webkit-desbordamiento-formularios de desplazamiento roto en iOS 7 web de pantalla completa de la aplicación,
Problema con iOS 7 Mobile Safari Eventos de Desplazamiento del Teclado Arriba y Abajo,
ios7 problemas con webview de enfoque cuando se utiliza el teclado html,
¿Cómo enfocar un campo de texto HTML en un iPhone (que causa el teclado)?,
Mobile Safari Autofoco campo de texto,
iPad navegador requiere un extra toque después de anexar entrada,
Tocando campo de entrada de texto en el iPhone trae un teclado, pero a escribir no va a poner en cualquier texto,
`-webkit-desbordamiento-desplazamiento: touch` roto para inicialmente fuera de la pantalla los elementos en iOS7,
http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html,
http://calendee.com/ios-7-kills-forms-in-html5-apps/

  • es esta dentro de phonegap/cordova/sencha o una web alojada en la web de la aplicación?
  • El último, así que si hay una Phonegap configuración que funciona en torno a esta no me ayudan por desgracia.

1 Comentario

  1. 6

    Usted debe comprobar fuera de esta respuesta –
    posición fija div se congela en la página (iPad)

    Y aquí hay un artículo muy bueno de Brad Frost que he desesperadamente leer a través de un par de veces a mí mismo a través de los años con la esperanza de una respuesta a este dilema. –
    http://bradfrostweb.com/blog/mobile/fixed-position/

    Responde a lo que usted está haciendo bastante bien. Fija el posicionamiento se rompe en el móvil, puede ser masajeado con JS, pero realmente no es aún completamente fijo.

    Puede solucionar un problema, el «encabezado glitch» en la demo 2 es sólo el encabezado fijo escondido detrás de la posición absoluta #página. Dar a su cabecera un z-index de 1+ y que va a solucionar ese problema.

    Tan lejos como el encabezado de perder el posicionamiento cuando el teclado viene en; ni siquiera estoy seguro de que en realidad es un bug, simplemente la naturaleza del navegador. Lo que pasa es que el teclado está ganando el foco, en ese punto en el que está ahora tratando con ios’ de IU no es el navegador web y todo lo que en el fondo es la congelación (incluidos los fijos de los elementos con posición y todos los demás elementos). Observe cómo la totalidad de las pantallas de los pergaminos, que no es una característica de web es un sistema incorporado en la función de navegador.

Dejar respuesta

Please enter your comment!
Please enter your name here