JavaScript中的媒體查詢

Question

我想知道如何編寫這些值：

@media screen and (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi), (max-device-width: 550px)

這樣，除了上面的值之外，我可以像這樣編寫if子句：

if (window.screenWidth >=550 || window.screenWidth >=550 ) {
}

Answer 1

我不相信像這樣的媒體查詢可作為JS window屬性使用，盡管那里可能有處理這些查詢的插件。

一種解決方案是使用CSS中的常規查詢以一種特定的方式設置任意元素的樣式，這種方式可以通過javascript簡單地檢測出來。

CSS：

@media screen and (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi), (max-device-width: 550px) {
    head { font-family: 'someValue'; }
}

JS（帶jQuery）：

$(function() {
    var foo = $('head').css('fontFamily').split("\"").join("").split("'").join(""); // split/joins needed for cross-browser compatibility
    if(foo === 'someValue') {
        doStuff();
    } else if(foo === 'someOtherValue') {
        doOtherStuff();
    }
}

有點駭客，但行得通。 我將這些代碼的變體用於響應式設計。