Входное поле iOS 7.1, расположенное под виртуальной клавиатурой, увеличивает масштаб фокуса

Я пишу чат-приложение с помощью Кордовы, и в окне чата есть поле ввода, похожее на iMessage, в нижней части страницы. В iOS 7.0 щелчок по полю изменил размер окна и поднял поле ввода над клавиатурой. В iOS 7.1 нажатие на поле ввода просто вытолкнуло все снизу и не изменяет размер окна.

My viewport настроен на:

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

  • При позиционировании ввода относительно вершины, изменение размера не происходит. Однако позиционирование входного сигнала достаточно низко, чтобы соответствовать верхней части клавиатуры, приводит к ошибке без изменения размера. Это можно воспроизвести, построив Ионное матовое стекло и изменив нижний колонтитул с

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

    to

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

    В www/index.html

Это повторяет ошибку в iOS7.1 и работает как ожидается в iOS 7.0.x. Я следил за предложениями здесь, но они нити датированы и не работают. Заранее благодарю вас за понимание!

Ответы

Ответ 1

Изменить: Ionic зафиксировал это в бета-версии 4, поэтому эти хакерские исправления не должны быть нужны:) Большой до Ионная команда для распознавания проблемы и ее исправления!

То, что я собираюсь сейчас, похоже на @ajsnaps answer выше. Я не считаю это хорошим решением, потому что у него есть ошибки (похожие на те, которые указаны в другом потоке).

Я попытаюсь обновить это с помощью чего-то лучшего, когда я это выясню, и я оставлю это открытым, если кто-то найдет лучшее решение.

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

});

Кроме того, я убедился, что заголовок reset после перехода из режима чата.

Надеюсь, это поможет!

Ответ 2

Усилили ли вы настройку ширины? Как упоминалось здесь?

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