如何通過JavaScript檢測瀏覽器是否支持CSS3媒體查詢和CSS3漸變？

Question

如何通過JavaScript檢測瀏覽器是否支持CSS3媒體查詢？

如何通過JavaScript檢測瀏覽器是否支持CSS3漸變？

謝謝。

Answer 1

看看http://modernizr.com/，這是使用javascript進行featuredetection的一個很好的庫。

Answer 2

檢查這些鏈接

+ How to detect if Media Queries are present using Modernizr

+ What’s New in Modernizr 2

Answer 3

破解開Modernizr（可測試媒體查詢），我們可以看到它使用了window.matchMedia（MDN page）功能。我們可以在普通的舊香草JS檢查，看看是否函數存在（Modernizr的是真的真棒，但有時你只是想一塊磚，不是房子）：

function mediaQueriesSupported() 
{ 
    if(typeof window.matchMedia != "undefined" || typeof window.msMatchMedia != "undefined") 
    { 
     // alert("media queries are supported!"); 
     return true; 
    }else{ 
     // alert("no media query support :("); 
     return false; 
    } 
} 

或者更優雅：

function mediaQueriesSupported() 
{ 
    return (typeof window.matchMedia != "undefined" || typeof window.msMatchMedia != "undefined"); 
} 

JSFiddle

我已經在支持媒體查詢以下瀏覽器進行測試，所有正確返回真：

• 的Safari移動
• 鉻26

我已經不支持媒體查詢以下瀏覽器進行測試，全部正常返回false：

• IE 7

至於梯度支持檢測，有一些很好的答案here和here。事實上，您只需設置屬性並進行測試即可。瀏覽器會拋出垃圾或不支持的CSS屬性。

編輯：

Niet的擁有here一個很好的回答這個問題，類似於我的梯度檢測的建議。這不是純粹的Javascript（它需要非常少量的CSS），但它是一個絕對的傻瓜式的方法。