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

Question

注意：可能與here重複（並且我找到了更多解決方案），但它無法解決我的問題。

你好，我想改變某些元素的顏色，當屏幕的大小是不同的，這裏是他們會告訴你我所有的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'關鍵字不存在一樣。

由於沒有像「only」這樣的媒體類型，樣式表應該被舊版瀏覽器忽略。

Safari瀏覽器（5.1.7）現在很老了，我們都達到8.0.5

這是1個可能的解釋