理想情况下,我希望整个界面具有 自定义样式,可以在 ios (itouch/ipad) 或带有虚拟键盘的 android 上看到。详情见下文。
当键盘“存在”时,自定义设置的 CSS hacking 规则也是一种可接受的解决方案。
在网站上同时定位 android 和 ios (HTML/JavaScript/CSS) 还要注意里面的布局是:“fluid”。
编辑:更多的是设计,然后是文字;所以这些变化不会让人迷失方向。在最低级别,我只希望有或没有虚拟键的设计更改(也许只是背景更改)。
这是一个好还是坏的设计理念,这个问题值得商榷。但是,我觉得与问题无关。对于这样的利用,可以使用比文本更多的东西(例如游戏或交互式媒体)。
因此赏金:尽管不再需要我正在从事的元素的答案(使用了替代设计)。我仍然相信这个问题可以从回答中受益。
默认行为
+--------+
| |
+------------+ +-+-hidden-+-+ <- ~50% hidden
| +--------+ | | +--------+ |
| | | | | |visible | |
| | | | \ | | | | <- ~50% visible
| | 100% | | ==> | +--------+ |
| | | | / | |virtual | |
| | | | | | keys | |
| +--------+ | | +--------+ |
+------------+ +------------+
期望的行为
+------------+ +------------+
| +--------+ | | +--------+ |
| | | | | |visible | | <- 100% visible (example styling)
| | | | \ | | | | Custom Styling
| | 100% | | ==> | +--------+ |
| | | | / | |virtual | |
| | | | | | keys | |
| +--------+ | | +--------+ |
+------------+ +------------+
最佳答案
我不确定,这是想要的效果吗?检查此链接
更新
(1)。假设它是一个网站并在设备浏览器上运行。然后我们可以通过检查屏幕大小来检查虚拟键盘的存在。
检查设备浏览器 - http://jsfiddle.net/UHdCw/8/show/
代码:- http://jsfiddle.net/UHdCw/8/
(2)。如果您使用 HTML5 和 Phonegap 构建原生应用程序,情况会有所不同。由于没有直接的 API Hook 来检查键盘状态,我们必须编写 own plugin在Phonegap。
在 Android 中,您可以使用 native 代码 [ check here 来检查键盘的显示/隐藏状态。 ]。并且必须编写 Phonegap 插件才能在我们的 HTML 中获取这些事件。
[Phonegap 就是一个例子。我认为大多数原生框架的 html 都有这种与原生代码 Hook 的好处]
iOS 更新
正如您所说,存在键盘时高度/位置没有变化。我们可以做一件事,当输入获得焦点时,我们可以添加收缩类并减小元素大小。检查以下链接。
关于javascript - 虚拟键盘激活时的屏幕样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8556933/