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

Posted 2023-03-06

【中文标题】高度媒体查询在带有 Safari 的 iPhone 6 上无法正常工作

【英文标题】：Height Media Queries not working properly on iPhone 6 with Safari

【发布时间】：2018-05-31 04:57:21

【问题描述】：

我有以下媒体查询，它们应该在 iPhone 和 android 的 Web 视图中工作：

@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 个问题：

如何检测键盘打开/关闭 是否可以让这些媒体查询同时适用于 Android 和 iPhone？ 这是否与 iPhone 6 的 Retina 显示屏有关？

【参考方案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;
    

【讨论】：

没有帮助。似乎键盘是 web 视图上方的覆盖层，所以这些查询永远不会被考虑

@Tsury，是的，它不适用于键盘。据我所知，没有办法从 css 对键盘做出反应。