css - 如果浏览器支持 CSS3 媒体查询和 CSS3 渐变，我如何通过 JavaScript 检测？

Question

如果浏览器支持 CSS3 媒体查询，我如何通过 JavaScript 检测？

如果浏览器支持 CSS3 渐变，我如何通过 JavaScript 检测？

谢谢你。

Answer 1

破解打开的Modernizr（可以测试媒体查询），我们看到它使用了window.matchMedia（MDN 页面）功能。我们可以在普通的旧版 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

我在以下支持媒体查询的浏览器中进行了测试，均正确返回 true：

• Safari 移动版
• 铬 26

我在以下不支持媒体查询的浏览器中进行了测试，都正确返回了 false：

• 即 7

至于梯度支持检测，这里和这里有一些很好的答案。实际上，您只是在设置属性，然后在事后对其进行测试。浏览器会丢弃垃圾或不受支持的 CSS 属性。

编辑：

Niet 在这里对这个问题有一个很好的答案，类似于我对梯度检测的建议。它不是纯 Javascript（它需要非常少量的 CSS），但它绝对是一种万无一失的方法。