iOS 7.1 Eingabefeld unterhalb der virtuellen Tastatur positioniert Zoom Zoom auf Fokus

Question

Ich schreibe eine Chat-Anwendung mit Cordova, und die Chat-Ansicht hat ein iMessage-ähnliches Eingabefeld am Ende der Seite. In iOS 7.0 wurde durch Klicken auf das Feld die Größe des Fensters geändert und das Eingabefeld über die Tastatur gebracht. In iOS 7.1 wurde durch Klicken auf das Eingabefeld einfach alles von unten nach oben verschoben und die Größe des Fensters nicht geändert.

Mein Ansichtsfenster ist eingestellt auf:

<meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, target-densitydpi=device-dpi" /> 

• Bei der Positionierung der Eingabe relativ zu der Spitze, hat die Resize nicht passieren. Wenn Sie den Eingang jedoch so niedrig positionieren, dass er mit der Oberseite der Tastatur ausgerichtet ist, führt dies zu keinem Größenänderungsfehler. Dies kann durch den Bau der Ionic frosted glass demo und Ändern der Fußzeile von

  <footer class="bar bar-footer bar-frosted"><button class="button button-clear button-positive" ng-click="add()">Add Message</button></footer>

  zu

  <footer class="bar bar-footer bar-frosted"><input name="testInput"></footer>

  In www repliziert/index.html

Dies repliziert die Fehler in iOS7.1 und funktioniert wie erwartet in iOS 7.0.x. Ich habe die Vorschläge here befolgt, aber sie Thread ist veraltet und funktionierte nicht am Ende. Vielen Dank im Voraus für jede Einsicht!

Answer 1

Edit: Ionic in dieser Beta 4 fixiert ist, so dass diese Hacky Behebungen zur Erkennung der Ausgabe und Festsetzung es bis zum Ionic Team notwendig :) Big sollte nicht sein!

Was ich für jetzt gehe ist ähnlich wie @ajsnaps Antwort above. Ich halte es nicht für eine gute Lösung, weil es Bugs hat (ähnlich wie in dem anderen Thread).

Ich werde versuchen, dies mit etwas besser zu aktualisieren, wenn ich es herausfinden, und ich werde das offenlassen, falls jemand mit einer besseren Lösung kommt.

$("input").on('focus',function(){ 

//set brief timeout to let window catch up 
setTimeout(function(){ 

//pull down the message area (scrollPane) and header (titleBar) 
//works on both 3.5" and 4" screens 
$("titleBar").css('top', '215px'); 
$("scrollPane").css('top', '273px'); 

},20); 

}); 

$("input").on('blur',function(){ 

//set brief timeout to let window catch up 
setTimeout(function(){ 

//push the top back up 
$("titleBar").css('top', '0px'); 
$("scrollPane").css('top', '56px'); 

},20); 

}); 

Zusätzlich habe ich sichergestellt, dass die Kopfzeile zurückgesetzt wird, nachdem ich aus der Chat-Ansicht zurück navigiert habe.

Hoffe, das hilft!

Answer 2

Haben Sie versucht, die Breite explizit zu setzen? Wie erwähnt here?

<meta name="viewport" content="width=device-width">