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上时，视口大小不会改变。

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

关于您的更新，此答案不变。这是iOS当前表现出来的行为。我已经在iOS 12和三星S8上进行了测试，它们都可以按预期进行响应。

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