当虚拟键盘处于活动状态时屏幕样式

I'm not sure, is this the desired effect?. check this link

http://jsfiddle.net/UHdCw/3/

Update

(1). Assuming its a website & running on device browser. Then we can check the presence of virtual keyboard by checking the screen size.

Check in device browser - http://jsfiddle.net/UHdCw/8/show/

code : - http://jsfiddle.net/UHdCw/8/

(2). If you are building native app with HTML5 & Phonegap, things will be different. Since there is no direct API hook to check the keybord status, we have to write our own plugin in Phonegap.

In Android you can check show/hide status of keyboard by using native code [check here]. and have to write Phonegap plugin to get those events in our HTML.

[Phonegap is an example. I think most of the html to native frameworks have this kind of felicity to hook with native code ]

iOS update

As you said there is no change in height/position when keyboard is present. We can do one thing, when input gets the focus we can add shrink class and reduce the element sizes. Check following link.

http://jsfiddle.net/UHdCw/28/show/

I encountered the same problem, this works for me:

<!-- 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>

Have JavaScript apply a class to the body when an input element has focus.

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

And then use @media queries to determine if mobile view:

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

The combination will let you stylize the page when the keyboard is up, on mobile. Thank you.

I had the exact same problem. Here's my solution so far, I'd appreciate if someone could test on Apple: http://jsfiddle.net/marcchehab/f2ytsu8z/show (to see the source code and all: http://jsfiddle.net/marcchehab/f2ytsu8z)

I detect if the keyboard is out in the following way: Upon loading I calculate a variable "sumedges", which is $(window).width() + $(window).height(). Then, in the event of $(window).resize() I compare: If the sum $(window).width() + $(window).height() has become smaller than "sumedges", it means the keyboard is out. This works here on Chrome on Android. You can easily tweak this code to do whatever you like.

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

Using jQuery, I found no way to force a smooth transition when you click on an input and the keyboard pops out. But it maybe possible to trick the system: In the fiddle, I set up a fake input (blue). When you click on it, the real input appears just below my display (yellow) and is selected. This way it all looks smooth here on Chrome on Android. Again, I'd appreciate if you guys could test.

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


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

I use a simple CSS media query to move active inputs into the top of the screen on mobiles when the keyboard is open. Something like this barebones example:

/* MOBILE KEYBOARD IS OPEN */
@media only screen and (max-width: 430px) and (max-height:400px){
input:focus{
position: fixed;
top:50px;
}
}

You have to adjust the viewport height by yourself, iOS and Android don't do it.

But there is a lib to fix it:

https://github.com/adamjgrant/a-viewport-that-works