Obtenir la hauteur de viewport lorsque le clavier doux est sur

les dimensions du viewport proviennent de la taille de l'élément UIWebView .

comme mentionné dans la réponse précédente il y a deux façons de gérer l'adaptation au clavier à l'écran. Vous pouvez redimensionner la vue ou ajuster les insets de contenu.

les dimensions du viewport sur iOS indiquent la taille de la vue de sorte que le redimensionnement ajusterait le viewport. Safari ajuste les insets et garde la vue de la même taille le viewport ne change pas.

si vous deviez faire des hypothèses que les appareils tactiles utilisent généralement sur l'entrée à l'écran plutôt que des claviers externes, vous pouvez programmatically ajuster la taille sur votre propre en prenant la hauteur ou la largeur de l'appareil en fonction de l'orientation et le facteur d'un multiplicateur pour la partie de l'écran consommée par le clavier à l'écran.

j'utilise une classe de viewport pour agir comme un proxy pour me donner très probablement les dimensions réelles de viewport plutôt que le navigateur déclaré et se lie aux éléments d'entrée pour suivre l'état des éléments d'entrée et des changements d'orientation pour modifier dynamiquement le multiplicateur appliqué lors de la demande des dimensions de viewport.

je me suis retrouvé avec le même problème et après un certain temps à mélanger CSS et un peu de javascript, j'ai trouvé une solution.

Notes:

• j'ai utilisé jQuery et SCSS
• j'ai préféré cacher l'élément au lieu de changer sa position (simple et efficace)
• L'élément est affiché si le clavier virtuel est fermé, mais l'entrée est toujours sur le focus. Pour cela, je enveloppé la règle css dans une requête média @media screen et (min-aspect-ratio: 11/16) . 11/16 parce qu'il est moins que le rapport 9/16 commun (la présence du clavier virtuel augmente ce rapport puis la règle est appliquée)

la solution:

D'abord, le script (en utilisant jQuery):

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

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

ainsi, alors que l'utilisateur se concentre sur une entrée de texte et le clavier virtuel est ouvert, le corps a une classe "figfixed".

puis, le CSS (j'utilise SCSS):

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

Et c'est tout!

Espère que cela aide quelqu'un!

juste pour vous donner une idée, quand le clavier apparaît sur iOS par défaut, il ne fait rien sur le scrollview sous-jacent.

Si votre contenu est présenté dans un personnalisé UIWebView , c'est au programmeur:

• redimensionnez le scrollview pour éviter d'avoir du contenu inaccessible sous le clavier.

• ajuster les inserts de contenu de scrollview (recommandé). Le la taille de scrollview reste la même mais une "bordure" est ajoutée au bas pour que l'utilisateur puisse faire défiler tout le contenu.

Je ne suis pas sûr que l'une ou l'autre des solutions affecte le viewport , mais vous pourriez essayer les deux.

si votre contenu web est présenté par Safari, cependant, Apple ajuste les insets pour vous.

Cette solution est un peu alambiquée, mais elle pourrait fonctionner...

1. Détecter si oui ou non le clavier est actif.
2. Saisir la fenêtre d'affichage de la largeur/hauteur
3. Soustraire la hauteur du clavier.

j'ai inventé ce hack:

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

}

maintenant, ce serait un échec dans deux cas:

• .la largeur de l'écran.la hauteur n'étant pas supportée, elle retomberait aux dimensions erronées de jquery. Dans mon cas, le clavier doux a rendu la hauteur plus petite que la largeur en mode portrait, de sorte que les dimensions jQuery ont abouti à un faux mode paysage et montrant ainsi le message "tourner votre appareil".

• la page est ouverte avec le clavier doux ouvert, qui je pense est sans objet. Aussi après le cacher, la plus grande hauteur est stockée de sorte que les choses seront fixées après cela.

Note:

• fenêtre.innerWidth/fenêtre.on pourrait utiliser innerHeight pour se débarrasser de la dépendance de jQuery

• le code ci-dessus est de corriger le problème de clavier dans portrait mode, mais la même solution pourrait être utilisée pour le mode paysage

tente de retourner des valeurs approximatives de window.innerWidth , window.innerHeight à ios6 ua; jquery utilisé pour les sélecteurs et .on() . Pas certain de la détection de la partie iOS device keyboard events; voir les liens de ressources

Essayer

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 /

ressources

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

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

comment gérer les événements clés de l'iphone

https://coderwall.com/p/xuawww répondre à des événements clavier sur iOS

http://looksok.wordpress.com/2013/02/02/ios-tutorial-hide-keyboard-after-return-done-key-press-in-uitextfield / iOS tutorial: hide key key key after return / done key press in 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