css - CSS 响应式最大高度在 Safari/笔记本电脑中不起作用？

Question

我有这个 CSS：

@media only screen and (max-height: 500px) {
    body{
        display: none;
    }
}

这会在页面达到 500px 时隐藏页面（只是为了测试它），在 Windows PC 上的浏览​​器中工作正常，当我在 Safari 中尝试我的 MacBook Pro 时，它似乎没有检测到它，我怎样才能让它工作适当地？我在谷歌上找不到很多

Answer 1

我对其进行了测试，它在 Safari(Mac) 上也可以正常工作。

div{
    background: #ddd;
    width: 300px;
    height: 300px;
}
@media only screen and (max-height: 500px) {
    div{
        display: none;
    }
}

这是屏幕截图。虽然 Safari（iPad/iPhone）存在错误。你可能喜欢阅读这篇文章。

Answer 2

这适用于野生动物园，我只是对其进行了测试以确保。

您的问题中唯一缺少的是该查询相对于您要更改的属性/类的位置。

换句话说，把它放在最后，它就会起作用。

示例：这告诉浏览器在浏览器高度小于 500px 时隐藏正文：

body {
    display: block; 
}
@media only screen and (max-height: 500px) {
    body{
        display: none;
    }
}

如果您在最后一个body定义中使用另一种方式，则媒体查询将毫无用处。

@media only screen and (max-height: 500px) {
    body{
        display: none;
    }
}
body {
    display: block; 
}