jquery - 打开软键盘时获取视口(viewport)高度

Question

我想在软键盘启动时获得准确的视口(viewport)大小。我目前在标题上使用以下代码以使网站响应:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

我意识到，当软键盘出现时，它使用设备高度作为视口(viewport)高度并将网站的其余部分向上推 - 这让我假设它是从 width=device-width 选项获得它的高度.

启动软键盘后使用如下代码:

setTimeout(function() {  
    viewport = document.querySelector("meta[name=viewport]");
    viewport.setAttribute('content', 'height=auto');
}, 300)

然后使用 jquery 获取高度在 Android 上显示正确的结果 - 也就是没有虚拟键盘的可见视口(viewport)大小，但在 iOS 上则不然。我得到了一个随机数，我认为它源于不存在的元标记的其余部分，所以我得到了网站的放大版本以及 75 或 100(在 iPhone 4s 上)之类的数字

我还尝试在调出键盘后创建一个固定元素，使其使用 top:0 的视口(viewport)高度；底部:0；属性，但我仍然得到原始高度。

更接近于此的是将视口(viewport)元标记高度设置为固定值，可以通过 jquery 的 $(window).height() 获取，这意味着元标记实际上在启动键盘后有所不同，但没有固定高度的真实值。

我看过很多关于这个的话题，但没有一个有解决方案。有人对此有解决方案吗？

Answer 1

在虚拟键盘打开后我想获取剩余屏幕高度的 View 中，我使用了一个绝对溢出的元素，它使用屏幕高度和整个页面都在里面。结果，虚拟键盘在溢出元素的顶部打开，没有改变其尺寸。

要解决特定问题，我所要做的就是将此元素的位置更改为静态并在打开虚拟键盘时删除溢出 - 实际上 ios 在发出 he 时默认更改为此行为虚拟键盘(将元素更改为静态位置)，这就是固定元素变为静态的原因。

希望对您有所帮助。