6

jquery を使用してメディア クエリのサポートを検出するための、手早く汚い方法が必要です。次のように関数を定義しました。

function mediaQueriesEnabled () {
   var v = parseFloat($.browser.version);
   if ($.browser.msie) {
      if (v < 9)
         return (false);
   }
   return (true);
}

誰かがこれを少し修正するのを手伝ってくれますか? このページを見ると：

http://caniuse.com/css-mediaqueries

ここにはいくつかの複雑さがあることに気付きました。たとえば、Safari のバージョンをテストすると、「534.57.2」が表示されます。主に危機に瀕しており、ほとんどの状況を短期間で処理する必要があるため、今のところmodernizrのインストールを避けたいと思います。どんな助けでも大歓迎です！

4

3 に答える 3

14

編集：Nietの方がはるかに優れていると感じているため、この回答をキュレーションしません（選択した回答を参照）。 まだ動作するはずですが、テストが必要になる場合があります。

Modernizr (メディア クエリをテストできる) を開くと、 window.matchMedia( MDN ページ) 関数が使用されていることがわかります。この関数が存在するかどうかを確認するために、プレーンな古いバニラ JS をチェックインできます。

function mediaQueriesEnabled () {
    if(typeof window.matchMedia != "undefined" || typeof window.msMatchMedia != "undefined") {
        return true;
    } else {
        return false;
    }
}

またはよりエレガントに：

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

JSFiddle

メディア クエリをサポートする次のブラウザーでテストしたところ、すべて正しく true が返されました。

  • サファリモバイル
  • クロム 26

メディア クエリをサポートしていない次のブラウザーでテストしたところ、すべて正しく false が返されました。

  • IE7
于 2013-06-19T23:31:34.427 に答える
12

メディア クエリを使用してスタイルシートを作成し、それが機能するかどうかを確認できます。

あなたのHTMLで：

<style>@media all and (min-width:1px) {
    .mediatest {position:absolute}
}</style>

(または、スタイルシートを動的に作成することもできますが、それは困難です)

次に、スクリプトで：

var d = document.createElement('div');
d.className = "mediatest";
document.body.appendChild(d);
if( window.getComputedStyle && window.getComputedStyle(d).position == "absolute") {
    // supports media queries!
}
document.body.removeChild(d);
于 2012-12-02T02:00:31.940 に答える
0

@Kolinkの回答に基づいた実用的なコードを次に示します。これまでのところ、このコードはうまく機能しています...編集があれば、このスレッドに投稿します。

Javascript:

var $globals = {
    mediaQuerySupport: false
}

function initMediaQueries () {
    // tests for media query support
    $globals.mediaQuerySupport = false;
    var d = document.createElement('div');
    d.className = "mediatest"; // found in core.css
    document.body.appendChild(d);
    if( window.getComputedStyle && window.getComputedStyle(d).position == "absolute") {
        $mlGlobals.mediaQuerySupport = true;
        mlDebug ('browser has media query support');
    }
    document.body.removeChild(d);
}

function mediaQueriesEnabled () {
   return ($globals.mediaQuerySupport);
}

$(document).ready(function() {
    initMediaQueries();
    if (mediaQueriesEnabled()) {
        ... do something
    }
});

CSS (これをメインのスタイルシート ファイルに追加しました):

@media all and (min-width:1px) {
    .mediatest {position:absolute}
}
于 2012-12-02T04:15:34.800 に答える