screen styling when virtual keyboard is active

Question

Ideally, i would want the entire interface to have a custom styling that is seen on the ios (itouch / ipad) or android equivalent with the virtual keyboard present. See below for more details.

A custom set CSS hacking rules to be active, when the keyboard is "present", is also an acceptable solution.

Targets both androids and ios, on a website (HTML/JavaScript/CSS) Also note that the layout inside is: "fluid".

Edit: This was more design, then text; So the changes are not disorientating. At the lowest level, I just desire a design change with and without the virtual keys (Perhaps just a background change).

The question on which, this is a good or bad design idea, is debatable. However, I feel is irrelevant to the question. For such an exploit can have uses more then text (such as games, or interactive media).

Hence the bounty: Despite no longer needing the answer for the project I was working on (an alternative design was used). I still believe this question can benefit from being answered.

Default Behavior

                       +--------+                         |        | +------------+       +-+-hidden-+-+   <- ~50% hidden | +--------+ |       | +--------+ | | |        | |       | |visible | | | |        | |   \   | |        | |   <- ~50% visible | |  100%  | |  ==>  | +--------+ | | |        | |   /   | |virtual | | | |        | |       | |  keys  | | | +--------+ |       | +--------+ | +------------+       +------------+ 

Desired Behavior

+------------+       +------------+    | +--------+ |       | +--------+ | | |        | |       | |visible | |   <- 100% visible (example styling) | |        | |   \   | |        | |      Custom Styling | |  100%  | |  ==>  | +--------+ | | |        | |   /   | |virtual | | | |        | |       | |  keys  | | | +--------+ |       | +--------+ | +------------+       +------------+ 

Answer 1

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/

Answer 2

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>