html - 移动键盘会影响 CSS 媒体查询的高度吗？

Question

我正在尝试为 iPhone 5 或屏幕高度较小的类似设备编写 CSS。当打开移动键盘且屏幕上的空间很少时，情况会变得更糟。当页面因键盘而变得非常短时，我想删除一些元素。

所以我尝试过这个

@media all and (max-height: 400px) {
  display: none;
}

但是当键盘弹出时，元素仍然存在于页面上。而且页面高度肯定小于400px。

更新

我问这个问题是因为我看到很少有关于SO(for example here)的问题或SO之外的文章，这些文章说虚拟键盘影响高度甚至方向(因为如果高度大于宽度，方向被认为是纵向，但在较小的设备上当键盘弹出时宽度变得大于高度并且设备切换到横向模式)。
这仍然是实际的还是过时的行为？

我也尝试过

@media all and (orientation: landscape) {
    ...
}

是的，当设备处于横向模式时它可以工作。不可以，当键盘弹出且网页高度小于宽度时，此功能不起作用。

Answer 1

否 - 当键盘出现在 iOS 上时，视口(viewport)大小不会改变。

尽管如此，它将输入置于焦点和 View 中。仅在Android上，它会随着虚拟键盘的打开而改变(至少在Chrome上)

关于您的更新，这个答案成立。这是 iOS 当前表现出的行为。我已在 iOS 12 和三星 S8 上对此进行了测试，它们的响应均符合上述预期。

出现您遇到的问题是因为如果出现虚拟键盘，设备不会报告新的视口(viewport)大小。它“漂浮”在浏览器上方，因此下方的内容保持相同的分辨率。