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

Question

理想情况下,我希望整个界面都有一个自定义样式,可以在ios(itouch/ipad)上找到,或者在虚拟键盘存在的情况下等效.请参阅下面的更多细节.

当键盘"存在"时,自定义设置CSS黑客规则是活动的,也是可接受的解决方案.

在网站上定位机器人和ios(HTML/JavaScript/CSS)另请注意,内部布局为:"流畅".

编辑:这是更多的设计,然后是文字; 所以这些变化并没有让人迷失方向.在最低级别,我只想在有和没有虚拟键的情况下进行设计更改(也许只是背景更改).

这是一个好的或坏的设计理念的问题是有争议的.但是,我觉得这个问题无关紧要.对于这样的漏洞利用可以使用更多文本(例如游戏或交互式媒体).

因此,赏金:尽管不再需要我正在研究的项目的答案(使用了替代设计).我仍然相信这个问题可以从回答中受益.

默认行为

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

期望的行为

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

Answer 1

我不确定,这是预期的效果吗？检查此链接

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

更新

(1).假设它是一个网站并在设备浏览器上运行.然后我们可以通过检查屏幕大小来检查虚拟键盘的存在.

检入设备浏览器 - http://jsfiddle.net/UHdCw/8/show/

代码: - http://jsfiddle.net/UHdCw/8/

(2).如果您使用HTML5和Phonegap构建本机应用程序,情况会有所不同.由于没有直接的API钩子来检查keybord状态,我们必须在Phonegap中编写自己的插件.

在Android中,您可以使用本机代码检查键盘的显示/隐藏状态[ 请在此处查看 ].并且必须编写Phonegap插件以在我们的HTML中获取这些事件.

[Phonegap就是一个例子.我认为大多数html到本机框架都有这种与本机代码挂钩的幸福]

iOS更新

正如您所说,当键盘存在时,高度/位置没有变化.我们可以做一件事,当输入获得焦点时,我们可以添加缩小类并减少元素大小.检查以下链接.

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

Answer 2

我遇到了同样的问题,这对我有用:

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

Answer 3

当输入元素具有时,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; }
}

该组合可让您在键盘启动时在移动设备上对页面进行样式化.谢谢.

Answer 4

就我而言，它不仅仅适用于 Android 上的 Chrome。在 Firefox 甚至三星中，互联网都很好（哇）。终于找到了 Chrome 团队一个月前发表的这篇文章https://developer.chrome.com/blog/viewport-resize-behavior/。添加此后<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content"> 它开始工作。