iOS 7.1 pole wejściowe umieszczone poniżej klawiatury wirtualnej wymusza zoom na ostrości

Piszę aplikację czat za pomocą Cordova, a Widok czatu ma iMessage-jak pole wprowadzania na dole strony. W systemie iOS 7.0 kliknięcie pola zmieniło rozmiar okna i przeniosło pole wejściowe nad klawiaturą. W systemie iOS 7.1 kliknięcie pola wprowadzania po prostu przesunęło wszystko od dołu i nie zmienia rozmiaru okna.

Mój viewport jest ustawiony na: 

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

  • Podczas pozycjonowania wejścia względem góry, zmiana rozmiaru nie następuje. Jednak ustawienie wejścia na tyle nisko, aby wyrównać się do górnej części klawiatury powoduje błąd braku zmiany rozmiaru. Można to powtórzyć, budując Ionic frosted glass demo i zmieniając stopkę z

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

    Do

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

    In www / index.html

To replikuje błąd w iOS7. 1 i działa zgodnie z oczekiwaniami w iOS 7.0.x. śledziłem sugestie tutaj , ale wątek jest datowany i nie skończył pracuję. Z góry dziękuję za wszelkie spostrzeżenia!

Author: Community, 2014-03-12
Source

2 answers

Czy próbowałeś jawnie ustawić szerokość? Jak wspomniano tutaj ?

<meta name="viewport" content="width=device-width">
 0
Author: Barzille,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-04-04 06:53:49

Edit: Ionic naprawił to w wersji beta 4, więc te hakerskie poprawki nie powinny być konieczne :) wielkie do zespołu Ionic za rozpoznanie problemu i naprawienie go!

To, z czym na razie idę, jest podobne do odpowiedzi @ajsnaps powyżej . Nie uważam tego za dobre rozwiązanie, ponieważ ma błędy (podobne do tych wskazanych w innym wątku).

Postaram się zaktualizować to o coś lepszego, kiedy to rozgryzę, i zostawię to otwarte na wypadek, gdyby ktoś przychodzi z lepszym rozwiązaniem.

$("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); 

});

Dodatkowo upewniłem się, że nagłówek jest resetowany po przejściu z widoku czatu.

Mam nadzieję, że to pomoże!
 0
Author: Joe Fatora,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 11:56:53