CSS響應最大高度不適用於safari/laptop？

Question

我有這樣的CSS：

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

這個隱藏頁面當它到達500像素（只是爲了測試它），在我的瀏覽器工作正常的Windows PC上，當我嘗試對我的MacBook Pro的Safari瀏覽器沒有關係似乎沒有發現它，我怎樣才能使它正常工作？我無法找到很多關於谷歌

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中的作品，我只是測試它來確保。

在你的問題中唯一缺少的就是那個查詢關於你想改變的屬性/類的位置。

換句話說，把它放在最後，它會工作。

舉例： 這告訴瀏覽器隱藏身體的時候，瀏覽器高度大於500像素小：

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; 
}