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

新手上路,请多包涵

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

 <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 上显示正确的结果 - 也就是没有虚拟键盘的可见视口大小,但在 iOS 上却没有。我得到一个随机数,我认为它源于不存在的元标记的其余部分,所以我得到了网站的放大版本以及 75 或 100 之类的数字(在 iphone 4s 上)

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

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

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

原文由 scooterlord 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 681
2 个回答

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

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

我希望这有帮助。

原文由 scooterlord 发布,翻译遵循 CC BY-SA 3.0 许可协议

截至 2021 年 3 月,window.innerHeight 反映了 iPad 上在运行 IOS 14.4.1 的 chrome、firefox、safari 浏览器中存在软键盘

原文由 den232 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题