javascript - 如何在 Web 应用程序上获取键盘高度

Question

这是一个网络应用程序，针对任何移动浏览器，但主要针对 iOS10 的 Chrome 和 Safari。当用户点击任何输入时，浏览器会打开内置键盘，这很好，但我正在尝试调整/重新定位在那个时间点与用户更相关的项目。

有没有办法计算键盘的高度，以便我可以相应地调整项目？通用解决方案会更好，因为输入可能会打开不同类型的键盘(文本、数字...)，但硬编码选项也是现阶段的有效响应。

我测试了 window.screen、window.innerHeight 等等都没有用...

谢谢!

Answer 1

Note: The credit of this answer fully goes to the user Alex k. However his solution has already been accepted by OP within comments section and I guess these should have to be in answer section as this is a very useful question.

要解决问题，请尝试 CSS media queries像这样:

var d = document.getElementById('d');

checkDimensions();

window.onresize = checkDimensions;

function checkDimensions(prevHeight) {
  d.innerHTML = 'Window dimensions: ' + window.innerWidth + ' x ' + window.innerHeight;
}

.media-query-test {
  display: none;
  color: red;
}

@media all and (max-height: 700px) {
  .media-query-test {
    display: block;
  }
}

<input type="number" />

<div id="d">
</div>

<div class="media-query-test">
  Height is less than 700px!
</div>

这是 JSFiddle:https://jsfiddle.net/t3yn2yz1/6/