css - style - Se corrigió el encabezado persistente y se desplazó a los campos de entrada enfocados

title html attribute

Question

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

Los dos ejemplos tienen una diferencia, uno tiene height=device-height en la ventana gráfica y el otro no.

Sin dispositivo de altura

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

Demostración: http://run.plnkr.co/plunks/SU8Csk/

Editar enlace: http://plnkr.co/edit/SU8Csk

Lo bueno: el encabezado fijo no cambia la posición / altura al tocar los campos.

Lo malo: el usuario no puede ver el campo enfocado sin desplazarse manualmente o presionar el botón ''siguiente''. Esto puede ser muy tedioso, especialmente si los campos están en una página que no se desborda.

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" />

Demostración: http://run.plnkr.co/plunks/rPoyaB/

Enlace de edición: http://plnkr.co/edit/rPoyaB

Lo bueno: el usuario se desplaza al campo enfocado como se desee.

Lo malo: el encabezado fijo se desplaza completamente fuera de la vista, esto debe persistir en la pantalla en todo momento. El escenario es que contendrá un botón de cancelación y un botón de guardar que siempre debe estar accesible. Además, cuando el campo está borroso, el encabezado parece aplastado hasta que el usuario lo desplaza hacia abajo para verlo, pero si el desbordamiento está deshabilitado, ni siquiera pueden hacerlo.

Lo feo: en mi código real, no trivial, lejos de estos ejemplos simplificados, hay un montón de elementos que están posicionados absolutamente dentro del encabezado para crear un efecto de ''pestaña'' de línea curva, la alineación de estos se desactiva completamente.

Debería poder abrir cada URL de demostración en iOS7 Safari, agregarla a la pantalla de inicio e iniciar para demostrar el problema.

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

NOTA: Soy consciente de que hay ''errores'' en iOS7 Safari, particularmente cuando se trata de aplicaciones web de pantalla de inicio, sin embargo, creo que puede existir una solución relacionada con la forma en que estoy estructurando la página. He hecho una gran cantidad de investigación (ver más abajo) pero estoy luchando para encontrar una solución.

Enlaces relacionados con el tema del ''encabezado fijo'': ¿ Necesita un encabezado fijo en ios7 + , cómo se obtiene un encabezado fijo para permanecer en la parte superior de la página? , Encabezados fijos con campos de texto en sitios web de safaris móviles , posicionamiento fijo y teclado virtual de iOS 5 , Problemas con el encabezado fijo, pie de página y barra lateral en ipad / iphone , posición de CSS: corregido; en iPad / iPhone? , Posicionamiento fijo en Mobile Safari , ¿Cómo evito que mi navegación fija se mueva así cuando se abre el teclado virtual en Mobile Safari? , aplicación web: problema con la altura del dispositivo / teclado , el elemento Div no se quedará en la parte inferior cuando esté presente el teclado virtual ios 7 , aplicación web iOS: deshabilitar el enfoque automático en el campo de entrada de texto , el encabezado fijo de la posición de desaparición en ios7 safari móvil , 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 con el problema de ''los campos de entrada no se enfocan'': formularios de desplazamiento de desbordamiento de webkit rotos en la aplicación web de pantalla completa iOS 7 , Problema con iOS 7 Eventos de desplazamiento de Safari móvil en el teclado hacia arriba y hacia abajo , ios7 problemas con el enfoque de vista web cuando se usa el teclado html , ¿Cómo enfoco un campo de texto HTML en un iPhone (haciendo que se levante el teclado)? , El campo de texto de Mobile Safari Autofocus , el navegador iPad requiere un toque adicional después de agregar la entrada , al tocar el campo de entrada de texto en el iPhone aparece el teclado, pero al escribir no se insertará ningún texto , `-webkit-overflow-scrolling: touch` roto para elementos inicialmente fuera de pantalla en iOS7 , http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html , http://calendee.com/ios-7-kills-forms-in-html5-apps/

Answer 1

Debería revisar esta respuesta: la posición fija se congela en la página (iPad)

Y aquí hay un muy buen artículo de Brad Frost que he leído desesperadamente algunas veces a lo largo de los años esperando una respuesta a este dilema. - http://bradfrostweb.com/blog/mobile/fixed-position/

Responde lo que estás preguntando bastante bien. El posicionamiento fijo se rompe en el móvil, puede ser masajeado con JS, pero ni siquiera está completamente arreglado.

Puede solucionar un problema, su "error de encabezado" en la demo 2 es solo el encabezado fijo que se oculta detrás de la página # absolutamente posicionada. Dale a tu encabezado un índice z de 1+ y eso solucionará ese problema.

En cuanto al encabezado pierde posicionamiento cuando entra el teclado; Ni siquiera estoy seguro de que sea un error, solo la naturaleza del navegador. Lo que está sucediendo es que el teclado está ganando enfoque, en ese punto ahora está tratando con la interfaz de usuario de ios, no con el navegador web y todo lo que está en segundo plano se está congelando (incluidos los elementos de posición fija y todos los demás elementos). Observe cómo se desplaza la pantalla completa, eso no es una función web, es una función integrada del navegador.