高度媒体查询在使用Safari的iPhone 6上无法正常工作

Question

我有以下媒体查询，它们应该在Webview中的iPhone和Android中运行：

@media (max-height: 275px) {
  .logo {
    display: none;
  }
}

@media (max-height: 365px) {
    .default-title {
        display: none;
    }
}

@media (max-height: 450px) {
    .logo {
        padding-top: 1rem;
    }
}

@media (max-height: 315px) {
    .logo {
        padding-top: 0;
    }
}

基本上，当工作空间高度减小时，它应该使元素收缩/消失。

它在Android设备上运行良好，但在我的iPhone 6上完全被忽略。就好像Safari完全没有意识到键盘是打开的。如果是这样，那么我有3个问题：

1. 如何检测键盘的打开/关闭
2. 有可能使这些媒体查询适用于Android和iPhone吗？
3. 这与iPhone 6的Retina显示屏有关吗？

Answer 1

将媒体查询重新排序为最大到最小：

@media (max-height: 450px) {
    .logo {
        padding-top: 1rem;
    }
}

@media (max-height: 365px) {
    .default-title {
        display: none;
    }
}

@media (max-height: 315px) {
    .logo {
        padding-top: 0;
    }
}

@media (max-height: 275px) {
    .logo {
        display: none;
    }
}