web-dev-qa-db-fra.com

Obtenir la hauteur de la fenêtre d'affichage lorsque le clavier virtuel est activé

Cela fait des jours que j'essaie de faire fonctionner ce projet sans succès, alors je pensais partager des informations et peut-être que quelqu'un proposerait une solution.

Je souhaite obtenir la taille exacte de la fenêtre d'affichage lorsque le clavier logiciel est opérationnel. J'utilise actuellement le code suivant sur l'en-tête afin que le site soit réactif:

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

Ce que j'ai compris, c'est que lorsque le clavier logiciel est installé, il utilise la hauteur de l'appareil comme hauteur de la fenêtre d'affichage et pousse le reste du site vers le haut, ce qui me laisse supposer que sa hauteur est obtenue à l'aide de l'option width = device-width. 

Utilisation du code suivant après l’initiation du clavier logiciel:

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

Et puis obtenir la hauteur en utilisant jquery montre des résultats CORRECT sur Android - c'est-à-dire la taille de la fenêtre visible SANS le clavier virtuel, mais pas sur iOS. Je reçois un nombre aléatoire, ce qui, je suppose, provient du reste de la balise méta inexistante. Je reçois donc une version agrandie du site Web ainsi qu'un nombre comme 75 ou 100 (sur l'iphone 4s).

J'ai également essayé de créer un élément fixe après avoir mis le clavier en place, en utilisant la hauteur de la fenêtre d'affichage avec top: 0; et en bas: 0; attributs, mais je reçois toujours la hauteur d'origine.

Ce qui s'en rapproche, c’est de définir la hauteur de la balise méta de la fenêtre d’affichage à une valeur fixe, qui peut être sélectionnée par la fonction $(window).height() de jquery, ce qui signifie que la balise méta fait une différence après l’initiation du clavier, hauteur fixe.

J'ai vu beaucoup de sujets à ce sujet, mais aucun avec une solution. Quelqu'un qui a une solution pour cela?

jqueryioscssviewport
25
scooterlord

Dans la vue où je souhaitais prendre la hauteur de l'écran restant une fois le clavier virtuel activé, j'utilisais un élément absolument survolé couvrant tout l'écran en utilisant la hauteur de l'écran et le contenu de la page entière se trouvant à l'intérieur. de cela. En conséquence, le clavier virtuel s’ouvrait en haut de l’élément survolé, sans en modifier les dimensions.

Pour résoudre le problème spécifique, tout ce que j'avais à faire était de changer la position de cet élément en statique et de supprimer le débordement lors de l'ouverture du clavier virtuel. En fait, ios modifie ce comportement par défaut lors de la création du clavier virtuel (modifications éléments en position statique) et c’est pourquoi les éléments fixes deviennent statiques.

J'espère que ça aide.

5
scooterlord

Les dimensions de la fenêtre proviennent de la taille de l'élément UIWebView.

Comme mentionné dans la réponse précédente , il existe deux manières de s’adapter au clavier à l’écran. Vous pouvez redimensionner la vue ou ajuster les incrustations de contenu.

Les dimensions de la fenêtre d'affichage sur iOS indiquent la taille de la vue. Le redimensionnement l'ajusterait. Safari ajuste les incrustations et garde la vue de la même taille pour que la fenêtre ne change pas.

Si vous supposez que les périphériques tactiles utilisent généralement la saisie à l'écran plutôt que les claviers externes, vous pouvez ajuster vous-même la taille par programme en prenant la hauteur ou la largeur du périphérique en fonction de l'orientation et en prenant en compte un multiplicateur pour une partie de l'écran consommée par le moniteur. sur le clavier de l'écran.

J'utilise une classe de fenêtre d'affichage pour agir en tant que proxy afin de me donner les dimensions réelles de la fenêtre plutôt que de signaler le navigateur et de se lier aux éléments d'entrée pour suivre l'état des éléments d'entrée et les modifications d'orientation afin de modifier dynamiquement le multiplicateur appliqué lors de la demande des dimensions de la fenêtre.

5
Steve Buzonas

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

Remarques:

  • J'ai utilisé jQuery et SCSS
  • J'ai préféré cacher l'élément au lieu de changer de position (simple et efficace)
  • L'élément est affiché si le clavier virtuel est fermé mais que l'entrée est toujours active. Pour cela, j'ai encapsulé la règle css dans une requête multimédia écran @media et (format minimum: 11/16). 11/16 parce qu'il est inférieur au ratio commun 9/16 (la présence du clavier virtuel augmente ce ratio, puis la règle est appliquée)

La solution:

Tout 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, pendant que l'utilisateur se concentre sur une entrée de texte et que le clavier virtuel est ouvert, le corps a une classe 'fixfixed'.

Ensuite, le CSS (j'utilise SCSS):

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

Et c'est tout!

J'espère que ça aide quelqu'un!

1
CamoNunez

Cette solution est un peu compliquée, mais cela pourrait marcher ...

  1. Détecte si le clavier est actif ou non.
  2. Saisir la largeur/hauteur de la fenêtre
  3. Soustrayez la hauteur du clavier.
0
James Hafner

Je suis venu avec 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, cela échouerait dans deux cas:

  • screen.width/screen.height n'est pas pris en charge; il retomberait dans les dimensions incorrectes. Dans mon cas, le clavier logiciel rendait la hauteur inférieure à la largeur en mode portrait. Par conséquent, les dimensions de jQuery donnaient lieu à un faux mode paysage et affichaient ainsi le message de rotation de votre périphérique.

  • la page est ouverte avec le clavier logiciel ouvert, ce qui, à mon avis, est sans objet. De plus, après l'avoir cachée, la plus grande hauteur est stockée afin que tout soit réparé par la suite.

Remarque:

  • window.innerWidth/window.innerHeight peut être utilisé pour abandonner la dépendance jQuery

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

0
Will Kru

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

Si votre contenu est affiché dans une UIWebView personnalisée, il appartient au programmeur de:

  • Redimensionnez l'affichage de défilement pour éviter que du contenu inaccessible ne se trouve sous le clavier.

  • Ajustez les encarts de contenu de la vue de défilement (recommandé). La taille de la vue de défilement reste la même, mais une "bordure" est ajoutée au bas de la page afin que l'utilisateur puisse faire défiler tout le contenu.

Je ne sais pas comment l'une ou l'autre solution affecte la viewport, mais vous pouvez essayer les deux.

Si votre contenu Web est présenté par Safari, Apple ajuste les encarts à votre place.

0
Rivera