it-swarm.com.de

Rufen Sie die Ansichtsfensterhöhe ab, wenn die Soft-Tastatur aktiviert ist

Ich habe seit Tagen versucht, diese Arbeit zu machen, ohne Erfolg, also dachte ich, ich würde Informationen weitergeben, und vielleicht hat jemand eine Lösung.

Ich möchte die genaue Größe des Ansichtsfensters ermitteln, wenn die Soft-Tastatur aktiv ist. Ich verwende derzeit den folgenden Code in der Kopfzeile, damit die Site reagieren kann:

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

Was mir klar wurde, ist, dass beim Hochfahren der Soft-Tastatur die Gerätehöhe als Höhe des Ansichtsfensters verwendet wird und der Rest der Site nach oben gedrückt wird. Dies lässt mich vermuten, dass die Höhe über die Option width = Gerätebreite erreicht wird. 

Verwenden Sie den folgenden Code, nachdem Sie die Soft-Tastatur gestartet haben:

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

Wenn Sie dann die Höhe mithilfe von Jquery ermitteln, werden auf Android-Geräte KORREKTE Ergebnisse angezeigt - die sichtbare Größe des Ansichtsfensters OHNE die virtuelle Tastatur, jedoch nicht für iOS. Ich bekomme eine Zufallszahl, von der ich annehme, dass der Rest des Meta-Tags nicht vorhanden ist. Daher bekomme 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 nach oben gebracht habe, um die Viewport-Höhe mit top zu verwenden: 0; und unten: 0; Attribute, aber ich bekomme immer noch die ursprüngliche Höhe.

Was dem näher kommt, ist das Festlegen der Viewport-Meta-Tag-Höhe auf einen festen Wert, der von jquery's $(window).height() abgerufen werden kann. Dies bedeutet, dass das Meta-Tag nach dem Einleiten der Tastatur tatsächlich einen Unterschied macht, aber für einen feste Höhe.

Ich habe viele Themen rund um dieses Thema gesehen, aber keine mit einer Lösung. Wer hat dafür eine Lösung?

25
scooterlord

In der Ansicht wollte ich die Höhe des verbleibenden Bildschirms nehmen, nachdem die virtuelle Tastatur eingeschaltet war. Ich benutzte ein absolut überflogenes Element, das den gesamten Bildschirm mit Bildschirmhöhe abdeckte, und der Inhalt der gesamten Seite war darin . Infolgedessen öffnete sich die virtuelle Tastatur auf TOP des übergelaufenen Elements, ohne deren Abmessungen zu ändern.

Um das spezifische Problem zu beheben, musste ich lediglich die Position dieses Elements in statisch ändern und den Überlauf entfernen, wenn die virtuelle Tastatur geöffnet wurde. In der Regel ändert sich ios DIESES Verhalten, wenn die virtuelle Tastatur ausgegeben wird (ändert die Elemente in statische Position) und deshalb werden die festen Elemente statisch.

Ich hoffe das hilft.

5
scooterlord

Die Abmessungen des Darstellungsbereichs werden von der Größe des Elements UIWebView bestimmt.

Wie in vorherige 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 Inhaltseinsätze anpassen.

Die Abmessungen des Ansichtsfensters unter iOS geben die Größe der Ansicht an. Durch Ändern der Größe wird das Ansichtsfenster angepasst. Safari passt die Einschübe an und behält die Ansicht in derselben Größe, damit sich der Darstellungsbereich nicht ändert.

Wenn Sie davon ausgehen, dass Berührungsgeräte in der Regel Bildschirmeingaben anstelle von externen Tastaturen verwenden, können Sie die Größe selbst einstellen, indem Sie die Höhe oder Breite des Geräts je nach Ausrichtung und Faktor in einem Multiplikator für den Teil des Bildschirms berücksichtigen, den das Gerät verwendet Bildschirmtastatur.

Ich verwende eine Viewport-Klasse, um als Proxy zu fungieren, um mir höchstwahrscheinlich reale Viewport-Dimensionen zu geben, anstatt vom Browser berichtet zu werden, und bindet mich an Eingabeelemente, um den Status von Eingabeelementen und Orientierungsänderungen zu verfolgen, um den Multiplikator dynamisch zu ändern, wenn die Viewport-Dimensionen angefordert werden.

5
Steve Buzonas

Ich habe das gleiche Problem gefunden und nach einer Weile CSS und ein wenig Javascript gemischt, fand ich eine Lösung.

Anmerkungen:

  • Ich habe jQuery und SCSS verwendet
  • Ich zog es vor, das Element auszublenden, anstatt seine Position zu ändern (einfach und effektiv).
  • Das Element wird angezeigt, wenn die virtuelle Tastatur geschlossen ist, die Eingabe jedoch weiterhin im Fokus ist. Zu diesem Zweck habe ich die CSS-Regel in einen Media-Query @media-Bildschirm und (min-Seitenverhältnis: 11/16) eingepackt. 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 der Benutzer sich auf eine Texteingabe konzentriert und die virtuelle Tastatur geöffnet ist, verfügt der Körper über eine fixierte 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!

1
CamoNunez

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

  1. Ermitteln Sie, ob die Tastatur aktiv ist.
  2. Schnappen Sie sich die Breite/Höhe des Darstellungsbereichs
  3. Ziehen Sie die Höhe der Tastatur ab.
0
James Hafner

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

}

Nun würde dies in zwei Fällen fehlschlagen:

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

  • die Seite wird geöffnet, wenn die Soft-Tastatur geöffnet ist. Nach dem Ausblenden wird die größte Höhe gespeichert, sodass die Dinge danach repariert werden.

Hinweis:

  • window.innerWidth/window.innerHeight kann verwendet werden, um die jQuery-Abhängigkeit aufzuheben

  • der obige Code dient zur Behebung des Tastaturproblems im Hochformatmodus, die gleiche Lösung kann jedoch für den Querformatmodus verwendet werden

0
Will Kru

Nur um Ihnen eine Vorstellung zu geben: Wenn die Tastatur standardmäßig unter iOS angezeigt wird, wirkt sich dies nicht auf die zugrunde liegende Ansicht aus.

Wenn Ihr Inhalt in einer benutzerdefinierten UIWebView angezeigt wird, ist es dem Programmierer überlassen, entweder:

  • Verändern Sie die Bildlaufansicht, um nicht erreichbare Inhalte unter der Tastatur zu erhalten.

  • Passen Sie die Inhaltseinsätze der Bildlaufansicht an (empfohlen). Die Größe der Bildlaufansicht bleibt gleich, es wird jedoch ein "Rand" am unteren Rand hinzugefügt, sodass der Benutzer den gesamten Inhalt anzeigen kann.

Ich bin nicht sicher, wie sich die Lösung auf viewport auswirkt, aber Sie könnten beide ausprobieren.

Wenn Ihr Webinhalt jedoch von Safari präsentiert wird, passt Apple die Einschübe für Sie an.

0
Rivera