当键盘在移动设备上可见时，jquery / js / html5更改页面内容

可能重复：
iPad Web App：在Safari中使用JavaScript检测虚拟键盘？

我正在为一个网站构建一个移动版本，我很感兴趣，如果我可以使用jquery / js / html5或任何其他技术创建相同的分屏效果，可以在虚拟键盘可见时在移动应用上进行。

例如，如果用户进入我的网页并单击输入文本字段，则会显示虚拟键盘，浏览器会自动缩放到输入文本字段所在的区域。

我想要的是能够在虚拟键盘可见时根据新的分辨率（屏幕高度 – 键盘高度），通过移动屏幕顶部的输入文本字段，然后根据一些提示更改我的页面内容用户在文本字段中输入的内容。

这是一些草图，看看我在说什么：

这是没有键盘的页面视图，结果基于搜索：

带有纵向键盘的页面，徽标消失，文本输入移至顶部，最多显示4个项目

带有横向键盘的页面，徽标消失，thext输入移动到顶部并放大，只显示2个项目

键盘是隐藏的，页面应该去fze 1。

希望这可以帮助。

Answer 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
  

看看我的示例页面