Javascript 如何在基于窗口宽度/高度自动调整大小的网站中使用手机键盘

我制作的web应用程序通常通过最近的CSS转换根据窗口调整大小

对于台式电脑来说，这没什么大不了的。。我只是每隔50ms运行一次调整大小测试代码，检查window.innerWidth和window.innerHeight。我在这里不使用“resize”事件，因为当用户调整窗口大小时，该事件可能会运行得太快/太多次

在手机上，我使用调整大小和方向更改事件。由于各种Android Chrome/webview/iOS错误，有时需要调整事件大小。效果很好

---

问题是：正如我们所知，目前没有办法显式地检测几个不同的纯手机事件，比如虚拟键盘的弹出和弹出。因此，当键盘弹出时，这会触发调整大小事件，这会触发我的调整大小例程并导致应用程序窗口变得非常小。

因此，当键盘弹出时，这会触发调整大小事件，这会触发我的调整大小例程并导致应用程序窗口变得非常小

解决此问题的一种方法是检测模糊并关注文本/密码输入

子问题：我们还需要防止用户在键盘可见时重新定位设备的可能性，从而将不正确的数据发送到调整大小例程。这可以通过在发生方向更改事件时模糊输入来处理

示例代码：

if (gs.is_phone_or_tablet) {
 window.keyboard_is_visible = false
 $(document.body).on('focus', 'input[type="text"], input[type="password"]', function () {window.keyboard_is_visible = true})
 $(document.body).on('blur' , 'input[type="text"], input[type="password"]', function () {window.keyboard_is_visible = false})
 var hide_keyboard = function () {
  if (document.activeElement == document.body) return
  document.activeElement.blur ()
  window.keyboard_is_visible = false
 }
 //window.addEventListener('resize'           , hide_keyboard) // <-- for Webview <= 4.3 only..
 window.addEventListener('orientationchange', hide_keyboard)
}