打开软键盘时获取视口高度
我一直在努力使这项工作好几天，没有运气，所以我想我会分享信息，也许有人想出了一个解决scheme。
我想在软键盘启动时获得确切的视口大小。 我目前正在头上使用下面的代码为了使网站响应：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 我意识到，当软键盘出现时，它使用设备高度作为视口高度，并向上推动网站的其余部分 – 这使得我从宽度=设备宽度选项获取它的高度。
启动软键盘后使用以下代码：
setTimeout(function() { viewport = document.querySelector("meta[name=viewport]"); viewport.setAttribute('content', 'height=auto'); }, 300)
然后使用jquery获取高度在Android上显示CORRECT结果 – 也就是没有虚拟键盘的可见视口大小，但不在iOS上。 我得到一个随机数字，我假设其余的meta标签不存在，所以我得到一个像75或100（在iphone 4s）数字的放大版本，
我也尝试创build一个固定的元素后，使键盘了，使顶视图高度：0; 和底部：0; 属性，但我仍然得到原来的高度。
更接近这一点的是，将视口元标记高度设置为一个固定的值，可以通过jquery的$(window).height() ，这意味着meta标记实际上在启动键盘后$(window).height() ，但固定高度没有真正的价值。
我已经看到了很多的话题，但没有一个解决scheme。 任何人有这个解决scheme？
在这个视图中，我想要在虚拟键盘打开之后把余下的屏幕保留下来，我使用了一个绝对的overflown元素 ，它使用屏幕高度覆盖了整个屏幕，整个页面的内容都在屏幕的内部。 结果，虚拟键盘在溢出元素的TOP上打开，而不改变其尺寸。
为了解决具体的问题 ，我所有的是改变这个元素的位置，以静态和虚拟键盘打开时删除溢出 – 实际上ios更改为THIS行为默认发出他的虚拟键盘（更改元素静态位置）和这就是固定元素变成静态的原因。
我希望这有帮助。
视口尺寸来自UIWebView元素的大小。
正如前面的回答中提到的，有两种方法可以处理适应屏幕上的键盘。 您可以调整视图大小或调整内容插页。
iOS上的视口尺寸报告视图的大小，因此resize将调整视口。 Safari调整插页并保持视图的大小相同，以便视口不会更改。
如果您要假定触摸设备通常在屏幕input上使用，而不是通过外部键盘使用，则可以通过设备高度或宽度根据方向和系数调整自己的尺寸屏幕键盘上。
我利用一个视口类作为代理给我最有可能的实际视口尺寸，而不是浏览器报告，绑定到input元素跟踪input元素的状态和方向的变化dynamic修改请求视口尺寸时应用的乘数。
只是给你一个想法，当键盘出现在iOS默认情况下，它不会在底层滚动视图上。
如果您的内容显示在自定义的UIWebView ， UIWebView程序员决定：
-
调整滚动视图的大小，以避免在键盘下无法访问的内容。
-
调整滚动视图的内容插页（推荐）。 滚动视图大小保持不变，但“底部”被添加到底部，所以用户可以滚动全部到所有的内容。
我不知道如何解决scheme影响viewport ，但你可以尝试两个。
如果您的网页内容由Safari提供，Apple会为您调整插页。
这个解决scheme有点复杂，但它可能工作…
- 检测键盘是否处于活动状态。
- 抓取视口宽度/高度
- 减去键盘的高度。
我发现自己有相同的问题，经过一段时间混合CSS和一点点的JavaScript，我find了一个解决scheme。
笔记：
- 我使用jQuery和SCSS
- 我喜欢隐藏元素而不是改变其位置（简单而有效）
- 如果虚拟键盘已closures，但input仍处于焦点状态，则会显示此元素。 为此，我将css规则包装在媒体查询@media屏幕中，并且（最小纵横比：11/16） 。 11/16，因为它比普通的9/16比率低（虚拟键盘的存在增加了这个比例，所以这个规则被应用）
解决scheme：
首先，脚本（使用jQuery）：
$(document).on('focus', 'input, textarea', function(){ $('body').addClass("fixfixed"); }); $(document).on('blur', 'input, textarea', function(){ $('body').removeClass("fixfixed"); });
所以，当用户关注文本input并且虚拟键盘打开时，主体具有“修复”类。
然后，CSS（我正在使用SCSS）：
.fixfixed{ @media screen and (min-aspect-ratio: 11/16) { .bottomThingToHideWhenVirtualKeyboardIsShown{ opacity: 0; pointer-events: none; } } }
而就是这样！
希望它可以帮助别人！
试图在ios6 ua处返回近似的window.innerWidth ， window.innerHeight值; jQuery用于select器和.on() 。 不确定检测ios设备键盘事件部分; 看资源链接
尝试
CSS
html { height : 100vh; width : 100vw; }
JS
$(function() { if (/ipad|iphone/gi.test(window.navigator.userAgent)) { var events = "abort blur focus input scroll submit touchstart touchmove"; $("form, input").on(events, function(e) { return (function(window, elem, w, h) { var vh = window.getComputedStyle(elem,null).getPropertyValue(h); var vw = window.getComputedStyle(elem,null).getPropertyValue(w); var vwh = { "documentWidth": vw, "documentHeight": vh, "windowInnerWidth": window.innerWidth, "windowInnerHeight": window.innerHeight }; console.log(vwh); var _vwh = document.getElementById("vwh"); _vwh.innerHTML = JSON.stringify(vwh) return vwh }(window, document.documentElement, "width", "height")); }).focus(); }; })
jsfiddle.net/guest271314/Pv3N2/
资源
https://developer.mozilla.org/en-US/docs/Web/API/Window.innerHeight
http://www.w3.org/TR/2013/CR-css3-values-20130730/#vh-unit
如何处理iphone中的关键事件
https://coderwall.com/p/xuawww响应iOS上的键盘事件
http://looksok.wordpress.com/2013/02/02/ios-tutorial-hide-keyboard-after-return-done-key-press-in-uitextfield/ iOS教程：隐藏键盘后返回/完成按键的UITextField