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

Question

我一直试图让这项工作好几天,没有运气,所以我想我会分享信息,也许有人想出一个解决方案.

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

<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上)

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

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

我已经看到很多关于此的主题,但没有一个解决方案.有解决方案吗？

Answer 1

2022年

现在您可以将window resize侦听器与window.visualViewport.height属性结合起来（具有非常好的兼容性）：

window.addEventListener('resize', () => {
  // For the rare legacy browsers that don't support it
  if (!window.visualViewport) {
    return
  }

  console.log(window.visualViewport.height)
})

Answer 2

2023年

2022 年的新功能。在 Chrome 和 Firefox 上运行良好：
将“ interactive-widget=resizes-content”添加到元标记视口

    <meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">

确实适合我的目的

关联

Answer 3

视口尺寸来自UIWebView元素的大小.

如前面的答案所述,有两种方法可以处理适应屏幕键盘的问题.您可以调整视图大小或调整内容插入.

iOS上视口的尺寸报告视图的大小,因此调整大小将调整视口.Safari会调整插图并使视图保持相同的大小,以便视口不会更改.

如果您假设触摸设备通常在屏幕输入而不是外部键盘上使用,您可以通过设备高度或宽度自行调整大小,具体取决于方向和因子乘以屏幕的部分屏幕消耗在屏幕键盘上.

我利用视口类充当代理,为我提供最可能的实际视口尺寸而不是浏览器报告,并绑定到输入元素以跟踪输入元素的状态和方向更改,以动态修改请求视口尺寸时应用的乘数.

Answer 4

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

为了解决这个具体的问题,我只需要将这个元素的位置改为静态,并在打开虚拟键盘时删除溢出 - 实际上,当发出虚拟键盘时(默认情况下将元素更改为静态位置),ios会更改为此行为.这就是固定元素变为静态的原因.

我希望这有帮助.