Question

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

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

我已经围绕 window.screen ， window.innerHeight 进行了测试，等等无济于事......

谢谢！

Answer 1

注意： 此答案完全归功于用户Alex k。但是他的解决方案已被OP接受 评论部分，我想这些应该在答案部分 因为这是一个非常有用的问题。

要解决此问题，请尝试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/

如何在网络应用中获得键盘高度

1 个答案: