Holen Sie sich die Höhe des Ansichtsfensters, wenn die Soft-Tastatur eingeschaltet ist

Ich versuche seit Tagen, dies zum Laufen zu bringen, ohne Erfolg, also dachte ich, ich würde Informationen teilen und vielleicht findet jemand eine Lösung.

Ich möchte die genaue Größe des Ansichtsfensters erhalten, wenn die Soft-Tastatur aktiviert ist. Ich verwende derzeit den folgenden Code im Header, damit die Website reagiert:

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

Mir ist aufgefallen, dass die Bildschirmtastatur, wenn sie angezeigt wird, die Gerätehöhe als Ansichtsfensterhöhe verwendet und den Rest der Site nach oben schiebt – was mich annimmt, dass sie ihre Höhe von der Option width=device-width erhält.

Verwenden des folgenden Codes nach dem Initiieren der Soft-Tastatur:

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

Und dann zeigt das Abrufen der Höhe mit jquery KORREKTE Ergebnisse auf Android – auch bekannt als die sichtbare Ansichtsfenstergröße OHNE virtuelle Tastatur, aber nicht auf iOS. Ich erhalte eine Zufallszahl, von der ich annehme, dass der Rest des Meta-Tags nicht vorhanden ist, also erhalte ich eine vergrößerte Version der Website zusammen mit einer Zahl wie 75 oder 100 (auf dem iPhone 4s).

Ich habe auch versucht, ein festes Element zu erstellen, nachdem ich die Tastatur hochgefahren habe, sodass es die Ansichtsfensterhöhe mit top:0 verwendet; und unten: 0; Attribute, aber ich bekomme immer noch die ursprüngliche Höhe.

Was dem näher kommt, ist das Setzen der Viewport-Meta-Tag-Höhe auf einen festen Wert, der von jquery’s erfasst werden kann $(window).height()was bedeutet, dass das Meta-Tag nach dem Starten der Tastatur tatsächlich einen Unterschied macht, aber es gibt keinen echten Wert für eine feste Höhe.

Ich habe viele Themen zu diesem Thema gesehen, aber keines mit einer Lösung. Hat jemand eine Lösung dafür?

In der Ansicht, in der ich die Höhe des verbleibenden Bildschirms nehmen wollte, nachdem die virtuelle Tastatur eingeschaltet war, verwendete ich eine absolut überlaufenes Element die den gesamten Bildschirm mit Bildschirmhöhe bedeckte und der Inhalt der gesamten Seite darin war. Infolgedessen öffnete sich die virtuelle Tastatur OBEN auf dem überflogenen Element, ohne ihre Abmessungen zu ändern.

Um das zu beheben spezifisches Problemalles, was ich hatte, war, die Position dieses Elements in statisch zu ändern und den Überlauf zu entfernen, wenn die virtuelle Tastatur geöffnet wurde – tatsächlich ändert ios standardmäßig DIESES Verhalten, wenn die virtuelle Tastatur ausgegeben wird (ändert Elemente in statische Position) und deshalb das Problem behoben Elemente werden statisch.

Ich hoffe das hilft.

Die Abmessungen des Ansichtsfensters ergeben sich aus der Größe der UIWebView Element.

Wie in der vorherigen Antwort erwähnt, gibt es zwei Möglichkeiten, die Anpassung an die Bildschirmtastatur zu handhaben. Sie können die Größe der Ansicht ändern oder die Inhaltseinschübe anpassen.

Die Abmessungen des Darstellungsbereichs unter iOS geben die Größe der Ansicht an, sodass eine Größenänderung den Darstellungsbereich anpassen würde. Safari passt die Einsätze an und behält die Größe der Ansicht bei, sodass sich das Ansichtsfenster nicht ändert.

Wenn Sie davon ausgehen, dass Touch-Geräte im Allgemeinen eher Bildschirmeingaben als externe Tastaturen verwenden, können Sie die Größe selbst programmgesteuert anpassen, indem Sie die Höhe oder Breite des Geräts je nach Ausrichtung nehmen und einen Multiplikator für den vom Bildschirm verbrauchten Teil berücksichtigen Bildschirmtastatur.

Ich verwende eine Viewport-Klasse, die als Proxy fungiert, um mir höchstwahrscheinlich echte Viewport-Abmessungen zu geben, anstatt vom Browser gemeldet zu werden, und bindet an Eingabeelemente, um den Status von Eingabeelementen und Ausrichtungsänderungen zu verfolgen, um den beim Anfordern der Viewport-Abmessungen angewendeten Multiplikator dynamisch zu ändern.

Ich habe mich mit dem gleichen Problem wiedergefunden und nach einer Weile, in der ich CSS und ein bisschen Javascript gemischt habe, habe ich eine Lösung gefunden.

Anmerkungen:

• Ich habe jQuery und SCSS verwendet
• Ich habe es vorgezogen, das Element auszublenden, anstatt seine Position zu ändern (einfach und effektiv)
• Das Element wird angezeigt, wenn die virtuelle Tastatur geschlossen ist, aber die Eingabe noch fokussiert ist. Dazu habe ich die CSS-Regel in eine Medienabfrage verpackt @media screen und (min. Seitenverhältnis: 11/16). 11/16, weil es weniger als das übliche 9/16-Verhältnis ist (das Vorhandensein der virtuellen Tastatur erhöht dieses Verhältnis, dann wird die Regel angewendet)

Die Lösung:

Zuerst das Skript (mit jQuery):

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

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

Während sich der Benutzer also auf eine Texteingabe konzentriert und die virtuelle Tastatur geöffnet ist, hat der Körper eine „fixfixed“-Klasse.

Dann das CSS (ich verwende SCSS):

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

Und das ist es!

Hoffe es hilft jemandem!

Ab März 2021 spiegelt window.innerHeight das Vorhandensein einer Soft-Tastatur auf dem iPad in Chrome-, Firefox- und Safari-Browsern wider, auf denen IOS 14.4.1 ausgeführt wird

Ich habe mir diesen Hack ausgedacht:

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

}

Dies würde nun in zwei Fällen fehlschlagen:

• screen.width/screen.height wird nicht unterstützt; es würde auf die fehlerhaften jquery-Dimensionen zurückgreifen. In meinem Fall hat die Soft-Tastatur im Hochformat die Höhe kleiner als die Breite gemacht, sodass die jQuery-Abmessungen zu einem falschen Querformat führten und somit die Meldung „Gerät drehen“ angezeigt wurde.

• Die Seite wird mit geöffneter Soft-Tastatur geöffnet, was meiner Meinung nach strittig ist. Auch nach dem Ausblenden wird die größte Höhe gespeichert, sodass die Dinge danach behoben werden.

Notiz:

• window.innerWidth/window.innerHeight könnte verwendet werden, um die jQuery-Abhängigkeit aufzugeben

• Der obige Code soll das Tastaturproblem im Hochformat beheben, aber die gleiche Lösung könnte für den Querformatmodus verwendet werden

Nur um Ihnen eine Vorstellung zu geben, wenn die Tastatur standardmäßig auf iOS angezeigt wird, hat sie nichts mit der zugrunde liegenden Bildlaufansicht zu tun.

Wenn Ihre Inhalte in einer benutzerdefinierten angezeigt werden UIWebViewist es Sache des Programmierers, entweder:

• Passen Sie die Bildlaufansicht an, um zu vermeiden, dass unerreichbare Inhalte unter die Tastatur gelangen.

• Passen Sie die Inhaltseinschübe der Bildlaufansicht an (empfohlen). Die Scrollview-Größe bleibt gleich, aber unten wird ein “Rand” hinzugefügt, damit der Benutzer zu allen Inhalten scrollen kann.

Ich bin mir nicht sicher, wie sich eine der beiden Lösungen auf die auswirkt viewportaber du könntest beides versuchen.

Wenn Ihre Webinhalte jedoch von Safari dargestellt werden, passt Apple die Einschübe für Sie an.

Diese Lösung ist etwas kompliziert, aber es könnte funktionieren …

1. Erkennen, ob die Tastatur aktiv ist oder nicht.
2. Ergreifen Sie die Breite/Höhe des Ansichtsfensters
3. Subtrahieren Sie die Höhe der Tastatur.