стиль экрана, когда виртуальная клавиатура активна

я столкнулся с той же проблемой, это работает для меня:

<!-- Android Viewport height fix-->
<script type="text/javascript">
var isAndroid = navigator.userAgent.toLowerCase().indexOf("android") > -1; //&& ua.indexOf("mobile");
if(isAndroid) {
    document.write('<meta name="viewport" content="width=device-width,height='+window.innerHeight+', initial-scale=1.0">');
}
</script> 

пусть JavaScript применит класс к тело когда элемент ввода имеет focus.

$("input, textarea").focus(function(){  $(document.body).addClass('when-keyboard-showing');     });
$("input, textarea").blur( function(){  $(document.body).removeClass('when-keyboard-showing');  });

и затем использовать @media запросы, чтобы определить, если мобильный вид:

@media (max-width:550px) { 
    body.when-keyboard-showing .header { height:0; padding:0; }
}

комбинация позволит вам стилизовать страницу, когда клавиатура на мобильный. Спасибо.

у меня точно проблемы. Вот мое решение до сих пор, я был бы признателен, если бы кто-то мог проверить на Apple:http://jsfiddle.net/marcchehab/f2ytsu8z/show (чтобы увидеть исходный код и все: http://jsfiddle.net/marcchehab/f2ytsu8z)

Я обнаружить, если они клавиатура выходит следующим образом: при загрузке я вычисляю переменную "sumedges", которая является $(window).ширина() + $(окно).высота.)( Затем, в случае $(window).изменить размер () я сравниваю: Если сумма $(окно).ширина() + $(окно).высота () стала меньше, чем" sumedges", это означает, что клавиатура отсутствует. Это работает здесь на Chrome на Android. Вы можете легко настроить этот код, чтобы делать все, что вам нравится.

var sumedges = $(window).width() + $(window).height();
$(window).resize(function(){
    if($(window).width() + $(window).height() < sumedges) {
    $("#display").html("keyboard out");
  } else {
    $("#display").html("keyboard in");
  }
});

используя jQuery, я не нашел способа заставить плавный переход, когда вы нажимаете на вход, и клавиатура выскакивает. но возможно, можно обмануть систему: в скрипке я установил поддельный вход (синий). Когда вы нажимаете на него, появляется реальный вход чуть ниже моего дисплея (желтый) и выбран. Таким образом, все это выглядит гладко здесь, на Chrome на Android. Еще раз, я был бы признателен, если бы вы могли проверить.

$("#fakeinput").click(function(){
    $("#realinput").show().children("input").focus();
  $("html,body").scrollTop($("#display").offset().top);
});

$("#realinput input").blur(function(){
    $("#realinput").hide();
});