html - Iphone safari no cambiar el tamaño de la vista en el teclado abierto

ios css

Question

El safari móvil no actualiza el window.innerHeight cuando aparece el teclado. (al menos en 9.3.5, y hay varias respuestas como this , con comentarios que dicen que se rompió en ios 8.2)

La documentación de Apple dice que, antes de editarla, window.innerHeight volverá con iOS 10.

En iOS 10, los objetos WKWebView coinciden con el comportamiento nativo de Safari al actualizar su propiedad window.innerHeight cuando se muestra el teclado y no llamar a eventos de cambio de tamaño.

Necesito saber qué hacer mientras tanto para lidiar con el safari de iPhone, simplemente eliminando el sitio web, en lugar de cambiar el tamaño.

Tengo una aplicación que usa posicionamiento absoluto para todo, y tiene un div con desbordamiento entre el encabezado y el pie de página.

.mainContent {
  position: absolute;
  top: 50px;
  bottom: 28px;
  left: 0;
  right: 0;
}

Plunker aquí.

Capturas de pantalla, funcionando como se espera en Android:

No funciona como se espera en el iPhone:

Según esta respuesta , tengo una forma nativa de JS de determinar si el teclado del iPhone está abierto.

    document.getElementById(''chat-input'').addEventListener(''focus'', function(){
      if(/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){
        console.log("IOS focus");
        var scroll = window.scrollTop;
        window.scrollTop = 10;
        var keyboard_shown = window.scrollTop > 0;
        window.scrollTop = scroll;

        if(keyboard_shown){
          console.log("keyboard");
        }else{
          console.log("no keyboard");
        } 
      } 
    });
  })();

Pero eso no resuelve el problema ya que la window.innerHeight el window.innerHeight la window.innerHeight no cambia, por lo que no sé qué tan grande es el teclado. Solo podría hacer una lista de resoluciones de iphone y sus alturas de teclado, y ser una persona terrible ...

Answer 1

Safari 10 docs

Safari y WKWebView en iOS 10 no actualizan la propiedad window.innerHeight cuando se muestra el teclado. En versiones anteriores de iOS, WKWebView actualizaría la propiedad window.innerHeight cuando se muestre el teclado.

Parece que los doctores ahora declaran el comportamiento opuesto al observado por OP