CSS媒體查詢在Safari瀏覽器中不起作用

Question

注意：可能從這里重復了 （我用相同的解決方案找到了更多答案），但不能解決我的問題。

您好，我想在屏幕大小不同時更改某些元素的顏色，這是我的CSS規則，它們將告訴您我所希望的一切：

#my_div {
    height: 5px;
    background-color: #08c5ef;
    width: 100%;
}

@media only screen and (max-width: 1100px) {
    #my_div {
        background-color: red;
    }
}

@media only screen and (min-width: 1200px) {
    #my_div {
        background-color: green;
    }
}

它適用於除Safari（5.1.7）之外的所有瀏覽器，該行始終為綠色。 有人可以幫我嗎？ 也許我寫了錯誤的媒體查詢？

Answer 1

關鍵字“僅”還可以用於向較舊的用戶代理隱藏樣式表。 用戶代理必須處理以'only'開頭的媒體查詢，就像沒有'only'關鍵字一樣。

由於沒有諸如“ only”這樣的媒體類型，因此較舊的瀏覽器應忽略樣式表。

Safari（5.1.7）現在已經很老了，我們的版本是8.0.5

這是1種可能的解釋