Cómo determinar las dimensiones del keyboard iOS en Mobile Safari

Actualmente estoy tratando de crear una interfaz de usuario de sugerencias en una página web dirigida a Mobile Safari. Los componentes principales son un textbox y una list de desplazamiento que se muestra debajo del textbox que contiene la list de sugerencias.

Para hacer esto, necesito 1) determinar que el keyboard se ha mostrado y 2) determinar el tamaño de este para cambiar el tamaño de la list de sugerencias para que quepa en el espacio disponible.

He podido lograr (1) esperando el evento de enfoque, pero (2) sigue siendo problemático. No he podido encontrar ninguna forma de medir el tamaño del keyboard, ya que no parece afectar las dimensiones de la window o cualquier otra cosa que pueda pensar tratar de medir.

¿Hay alguna forma de determinar de forma progtwigda el tamaño del keyboard iOS cuando se muestra en safari mobile?

    Desafortunadamente, no hay manera de calcular la altura del keyboard. Ninguna de las properties de la window cambia cuando aparece el keyboard.

    Para determinar qué muestra el keyboard, puede usar esta solución: Aplicación web iPad: Detecte el keyboard virtual ¿Cómo usar JavaScript en Safari?

    Luego deberá agregar una class específica para el dispositivo y usar consultas de medios en su CSS junto con estas classs para diseñar de forma adecuada el dispositivo y la orientación.

    Si alguien tiene un mejor hack, realmente me encantaría enterarme.

    No hay ninguna propiedad que le top.innerHeight el tamaño del keyboard, pero puede calcularlo simplemente midiendo la parte top.innerHeight antes y después de que aparezca el keyboard.

    Una buena noticia es que esto es válido tanto para iOS como para Android.