Question

我有这个CSS：

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

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

Answer 1

我tested it，它在Safari（Mac）上运行良好。

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

这是screenshot。虽然Safari（iPad / iPhone）存在漏洞。您可能会喜欢阅读this。

Answer 2

这在safari中有效，我只是测试它以确保。

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

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

实施例：这告诉浏览器在浏览器高度小于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; 
}

CSS响应最大高度不适用于safari /笔记本电脑？

2 个答案: