当键盘在移动设备上可见时，jquery / js / html5更改页面内容
可能重复：
iPad Web App：在Safari中使用JavaScript检测虚拟键盘？
我正在为一个网站构建一个移动版本，我很感兴趣，如果我可以使用jquery / js / html5或任何其他技术创建相同的分屏效果，可以在虚拟键盘可见时在移动应用上进行。
例如，如果用户进入我的网页并单击输入文本字段，则会显示虚拟键盘，浏览器会自动缩放到输入文本字段所在的区域。
我想要的是能够在虚拟键盘可见时根据新的分辨率（屏幕高度 – 键盘高度），通过移动屏幕顶部的输入文本字段，然后根据一些提示更改我的页面内容用户在文本字段中输入的内容。
这是一些草图，看看我在说什么：
这是没有键盘的页面视图，结果基于搜索：
带有纵向键盘的页面，徽标消失，文本输入移至顶部，最多显示4个项目
带有横向键盘的页面，徽标消失，thext输入移动到顶部并放大，只显示2个项目
键盘是隐藏的，页面应该去fze 1。
希望这可以帮助。
我已经通过捕获resize事件为您的问题尝试了第一个解决方案。您可以知道方向和gest是键盘可见
更新 ：使用LKM解决方案添加iOS移动safari支持
var is_keyboard = false; var is_landscape = false; var initial_screen_size = window.innerHeight; /* Android */ window.addEventListener("resize", function() { is_keyboard = (window.innerHeight < initial_screen_size); is_landscape = (screen.height < screen.width); updateViews(); }, false); /* iOS */ $("input").bind("focus blur",function() { $(window).scrollTop(10); is_keyboard = $(window).scrollTop() > 0; $(window).scrollTop(0); updateViews(); }); 现在，您可以显示和隐藏徽标和某些订单项
function updateViews() { $("li").hide(); if (is_keyboard) { $("#logo").hide(); if (is_landscape) { $("li").slice(0, 2).show(); } else { $("li").slice(0, 4).show(); } } else { $("#logo").show(); $("li").show(); } }
对于基于此HTML的JS
Logo - Item
- Item
- Item
- Item
- Item
- Item
- Item
- Item
看看我的示例页面