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

I have this CSS:

我有这个CSS:

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

This hides the page when it gets to 500px (just to test it), works fine in my browsers on windows PC, when I try on my MacBook Pro in Safari it doesn't seem to detect it, how can I get this to work properly? I cant find much on it on google

当它达到500px(只是为了测试它)时隐藏页面,在Windows PC上我的浏览器中工作正常,当我在Safari中尝试我的MacBook Pro它似乎没有检测到它,我怎么能让它工作正常吗?我在谷歌上找不到多少

2 个解决方案

#1

I tested it and it's working fine on Safari(Mac) as well.

我测试了它,它在Safari(Mac)上工作正常。

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

Here's the screenshot. Though there's a bug with Safari(iPad/iPhone). You might love to read this.

这是截图。虽然Safari(iPad / iPhone)存在漏洞。你可能喜欢读这个。

#2

That works in safari, I just tested it to make sure.

这适用于safari,我只是测试它以确保。

The only thing that is missing in your question is the position of that query in regards to the properties/class you would like to change.

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

In other words, place it at the end and it will work.

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

Example: This tells the browser to hide the body when the browser height is smaller than 500px:

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

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

If you had it the other way around the last body definition would make the media query useless.

如果你拥有它,那么围绕最后一个身体定义的另一种方式会使媒体查询变得毫无用处。

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

#1