时间戳

首页 > 解决方案 > 移动键盘会影响 CSS 媒体查询中的高度吗？

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

问题描述

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

所以我试过这个

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

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

更新

我之所以问，是因为我在 SO（例如这里）或 SO 之外的文章中看到很少的问题，其中说虚拟键盘会影响高度甚至方向（因为如果高度大于宽度，则方向被认为是纵向，但在键盘弹出时在较小的设备上up width 变得超过 height 并且设备切换到横向模式）。
它仍然是实际的还是过时的行为？

我也试过

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

是的，它在设备处于横向模式时工作。不，当键盘弹出并且网页的高度小于其宽度时，它不起作用。

标签： htmlcssmedia-queriesvirtual-keyboard

解决方案

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

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

关于您的更新，这个答案是有效的。这是 iOS 所展示的当前行为。我已经在 iOS 12 和三星 S8 上对此进行了测试，它们的响应都符合上述预期。

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

推荐阅读