jquery - tamaño - Obtener la altura de la ventana gráfica cuando el teclado suave está activado

viewport definicion

Question

He estado tratando de hacer que esto funcione durante días, sin suerte, así que pensé en compartir información y tal vez alguien encuentre una solución.

Quiero obtener el tamaño exacto de la ventana gráfica cuando el teclado está activo. Actualmente estoy usando el siguiente código en el encabezado para que el sitio sea receptivo:

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

Lo que me di cuenta es que cuando aparece el teclado virtual, utiliza la altura del dispositivo como la altura de la ventana gráfica y empuja el resto del sitio hacia arriba, lo que me hace suponer que obtiene su altura desde la opción ancho = ancho del dispositivo.

Usando el siguiente código después de iniciar el teclado virtual:

setTimeout(function() {  
    viewport = document.querySelector("meta[name=viewport]");
    viewport.setAttribute(''content'', ''height=auto'');
}, 300)

Y luego, obtener la altura utilizando jquery muestra los resultados correctos en Android, también conocido como el tamaño de la ventana visible SIN el teclado virtual, pero no en iOS. Estoy obteniendo un número aleatorio, que asumo que proviene del resto de la meta etiqueta que no existe, por lo que estoy obteniendo una versión ampliada del sitio web junto con un número como 75 o 100 (en el iPhone 4s)

También intenté crear un elemento fijo después de subir el teclado, haciendo que use la altura de la ventana gráfica con la parte superior: 0; y abajo: 0; Atributos, pero sigo teniendo la altura original.

Lo que se aproxima a esto es establecer la altura de la metaetiqueta de la ventana gráfica en un valor fijo, que puede ser recogido por $(window).height() , lo que significa que la metaetiqueta realmente hace una diferencia después de iniciar el teclado, pero no hay un valor verdadero para una altura fija.

He visto muchos temas sobre esto, pero ninguno con una solución. ¿Alguien que tenga una solución para esto?

Answer 1

En la vista que quería tomar la altura de la pantalla restante después de que el teclado virtual estuviera encendido, estaba usando un elemento completamente desbordado que cubría toda la pantalla usando la altura de la pantalla y el contenido de toda la página estaba dentro de ella. Como resultado, el teclado virtual se abría en la parte SUPERIOR del elemento desbordado, sin cambiar sus dimensiones.

Para solucionar el problema específico , todo lo que tenía era cambiar la posición de este elemento a estática y eliminar el desbordamiento cuando se abría el teclado virtual. De hecho, ios cambia a ESTE comportamiento por defecto cuando emite el teclado virtual (cambia los elementos a la posición estática) y Es por esto que los elementos fijos se vuelven estáticos.

Espero que esto ayude.

Answer 2

Esta solución es un poco complicada, pero podría funcionar ...

1. Detectar si el teclado está activo o no.
2. Toma el ancho / alto de la ventana
3. Resta la altura del teclado.

Answer 3

La pieza intenta devolver window.innerWidth aproximados window.innerWidth , window.innerHeight en ios6 ua; jquery utilizado para los selectores y .on() . No estoy seguro acerca de la detección de la porción de eventos del teclado del dispositivo iOS; ver enlaces de recursos

Tratar

css

html {
    height : 100vh;
    width : 100vw;
}

js

$(function() {    
    if (/ipad|iphone/gi.test(window.navigator.userAgent)) {
    var events = "abort blur focus input scroll submit touchstart touchmove";
    $("form, input").on(events, function(e) {
      return (function(window, elem, w, h) {
               var vh = window.getComputedStyle(elem,null).getPropertyValue(h);
               var vw = window.getComputedStyle(elem,null).getPropertyValue(w);
               var vwh = { 
                           "documentWidth": vw, 
                           "documentHeight": vh, 
                           "windowInnerWidth": window.innerWidth, 
                           "windowInnerHeight": window.innerHeight
                         };
               console.log(vwh);
               var _vwh = document.getElementById("vwh");
               _vwh.innerHTML = JSON.stringify(vwh)
               return vwh 
              }(window, document.documentElement, "width", "height"));
    }).focus();
    };
})

jsfiddle http://jsfiddle.net/guest271314/Pv3N2/

recursos

https://developer.mozilla.org/en-US/docs/Web/API/Window.innerHeight

http://www.w3.org/TR/2013/CR-css3-values-20130730/#vh-unit

cómo manejar eventos clave en iphone

https://coderwall.com/p/xuawww Respondiendo a eventos de teclado en iOS

http://looksok.wordpress.com/2013/02/02/ios-tutorial-hide-keyboard-after-return-done-key-press-in-uitextfield/ iOS tutorial: ocultar el teclado después de regresar / listo presione la tecla UITextField

https://developer.apple.com/library/safari/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/InteractiveControl/InteractiveControl.html#//apple_ref/doc/uid/TP40008032-CH16

http://www.quirksmode.org/mobile/viewports2.html

Answer 4

Las dimensiones de la ventana UIWebView provienen del tamaño del elemento UIWebView .

Como se mencionó en la respuesta anterior, hay dos formas de manejar la adaptación al teclado en pantalla. Puede cambiar el tamaño de la vista o ajustar las inserciones de contenido.

Las dimensiones de la ventana gráfica en iOS informan el tamaño de la vista, por lo que el cambio de tamaño ajustaría la ventana gráfica. Safari ajusta las inserciones y mantiene la vista del mismo tamaño para que la ventana gráfica no cambie.

Si tuviera que asumir que los dispositivos táctiles generalmente utilizan la entrada de pantalla en lugar de los teclados externos, puede ajustar el tamaño mediante programación tomando la altura o el ancho del dispositivo según la orientación y el factor en un multiplicador para la porción de la pantalla consumida por el teclado en pantalla.

Utilizo una clase de ventana gráfica para actuar como un proxy para obtener las dimensiones reales de la ventana gráfica en lugar del informe del navegador y se une a los elementos de entrada para rastrear el estado de los elementos de entrada y los cambios de orientación para modificar dinámicamente el multiplicador aplicado al solicitar las dimensiones de la ventana gráfica.

Answer 5

Me encontré con el mismo problema y después de un tiempo mezclando CSS y un poco de Javascript, encontré una solución.

Notas:

• Usé jQuery y SCSS
• Preferí ocultar el elemento en lugar de cambiar su posición (simple y efectivo)
• El elemento se muestra si el teclado virtual está cerrado pero la entrada aún está enfocada. Para esto envolví la regla css en una pantalla de medios de consulta @media y (relación de aspecto mínimo: 11/16) . 11/16 porque es menor que la proporción común de 9/16 (la presencia del teclado virtual aumenta esta proporción y se aplica la regla)

La solución:

Primero, el script (usando jQuery):

$(document).on(''focus'', ''input, textarea'', function(){
    $(''body'').addClass("fixfixed");
});

$(document).on(''blur'', ''input, textarea'', function(){
    $(''body'').removeClass("fixfixed");
});

Entonces, mientras que el usuario se enfoca en una entrada de texto y el teclado virtual está abierto, el cuerpo tiene una clase ''arreglada''.

Luego, el CSS (estoy usando SCSS):

.fixfixed{
  @media screen and (min-aspect-ratio: 11/16) {
    .bottomThingToHideWhenVirtualKeyboardIsShown{
      opacity: 0;
      pointer-events: none;
    }
  }
}

¡Y eso es!

Espero que ayude a alguien!

Answer 6

Se me ocurrió este truco:

var storedWidth = 0;
var storedHheight = 0;

function onResize() {

  var windowWidth = $(window).width();
  var windowHeight = $(window).height();
  var screenWidth = screen.width || windowWidth;
  var screenHeight = screen.height || windowHeight;
  var width, height;

  if(screenWidth < screenHeight) {
    if(windowWidth > storedWidth) storedWidth = windowWidth;
    if(windowHeight > storedHeight) storedHeight = windowHeight;
    width = storedWidth;
    height = storedHeight;
  }else {
    width = windowWidth;
    height = windowHeight;
  }

  //use width and height from here

}

Ahora esto fallaría en dos casos:

• screen.width / screen.height no es compatible; sería retroceder a las dimensiones erróneas jquery. En mi caso, el teclado suave hizo que la altura fuera más pequeña que el ancho en el modo vertical, por lo que las dimensiones de jQuery dieron lugar a un modo de paisaje falso y, por lo tanto, mostraban el mensaje "rote su dispositivo".

• La página se abre con el teclado virtual abierto, que creo que es discutible. También después de ocultarlo, la altura más grande se almacena para que las cosas se solucionen después de eso.

Nota:

• window.innerWidth / window.innerHeight podría usarse para deshacerse de la dependencia jQuery

• el código anterior es para solucionar el problema del teclado en modo vertical, pero se podría usar la misma solución para el modo horizontal

Answer 7

Solo para darle una idea, cuando el teclado aparece en iOS de forma predeterminada, no hace nada en la vista de desplazamiento subyacente.

Si su contenido se muestra en un UIWebView personalizado, es UIWebView del programador:

• Cambie el tamaño de la vista de desplazamiento para evitar que el contenido sea inaccesible bajo el teclado.

• Ajuste las inserciones de contenido de scrollview (recomendado). El tamaño de la vista de desplazamiento se mantiene igual pero se agrega un "borde" en la parte inferior para que el usuario pueda desplazarse todo a todos los contenidos.

No estoy seguro de cómo afecta la solución a la viewport , pero puede probar ambos.

Sin embargo, si Safari presenta su contenido web, Apple ajusta las inserciones por usted.