jquery – 当软键盘打开时获取视口高度

前端之家收集整理的这篇文章主要介绍了jquery – 当软键盘打开时获取视口高度前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我一直在试图使这项工作几天,没有运气,所以我以为我会分享信息,也许有人提出了一个解决方案。

当软键盘启动时,我想获得准确的视口大小。我目前正在标题中使用以下代码,以便网站能够响应:

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

我意识到的是,当软键盘出现时,它将使用设备高度作为视口高度,并将其余部分向上推 – 这使我认为它的宽度是从width = device-width选项。

启动软键盘后使用以下代码

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

然后使用jquery获取高度,在Android上显示CORRECT结果,也就是可视的视口大小,不带虚拟键盘,但不在iOS上。我得到一个随机数字,我认为源于其余的元标记不存在,所以我得到一个放大的网站版本,一个像75或100的数字(在iphone 4s)

键盘放在上面后,我也尝试创建一个固定元素,使其使用顶部的视口高度:0;和底部:0;属性,但我仍然得到原来的高度。

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

我已经看到了很多关于这个问题的主题,但没有一个解决方案。任何有这个解决方案的人?

解决方法

…自从这个话题变得流行起来,我回答了自己的问题,因为我发现了什么问题。

在这个视图中,我想在虚拟键盘打开之后拿下剩下的屏幕的高度,我使用了一个绝对溢出的元素,它覆盖整个屏幕,使用屏幕高度,整个页面内容都在它的内部。结果,虚拟键盘在溢出元素的TOP上打开,而不改变其尺寸。

为了解决具体的问题,我所有的都是将这个元素的位置改为静态,并在虚拟键盘被打开的时候删除溢出 – 实际上,当发出他的虚拟键盘(将元素变成静态位置)时,ios默认情况下会改变为这个行为,而这就是固定元件变得静态的原因。

我希望这有帮助。

猜你在找的jQuery相关文章