理想情况下,我希望整个界面都有一个custom styling,可以在ios(itouch/ipad)或android上看到,并且有虚拟键盘.详见下文.

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

在网站上同时面向机器人和iOS(HTML/JavaScript/CSS) 还要注意,里面的布局是:"fluid".

Edit:这更多的是设计,而不是文字;所以这些变化不会让人迷失方向.在最低级别,我只想要有和没有虚拟键(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:,尽管我正在做的项目不再需要答案(使用了另一种设计).我仍然相信这个问题可以从回答中受益.

Default Behavior

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

Desired Behavior

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

推荐答案

我不确定,这是想要的效果吗?.查看此链接

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

Update

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

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

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

(2). 如果你正在用HTML5&;Phonegap,情况会有所不同.由于没有直接的API钩子来判断keybord状态,我们必须在Phonegap中写入我们的own plugin.

在Android中,您可以使用本地代码判断键盘的显示/隐藏状态[check here].并且必须编写Phonegap插件才能在我们的HTML中获得这些事件.

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

iOS update

正如你所说,当键盘存在时,高度/位置没有变化.我们可以做一件事,当输入得到关注时,我们可以添加收缩类并减少元素大小.判断以下链接.

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

Css相关问答推荐

如何使一组元素的行为像字符串一样?

与Chrome和Edge相比,背景位置动画在Firefox中运行并不流畅

实现前景渐变到背景的平滑混合

如何有条件地设置元素的字体大小,只有在未明确设置父字体大小(即字体大小为继承)的情况下?

当值小于 1 时理解 flex-shrink

flex-wrap 导致 children 身高加倍

使用 flexbox 使图像与内容高度相同

如何使用props 为 Vue 中的组件创建动态背景图像?

如何在 TypeScript 文件中导入 CSS 模块?

:required 或 [required] CSS Select 器

适合剩余高度

为什么我们将