10

現在のデバイス/メディアクエリに基づいて、JavaScriptのブロックをオプションで実行する方法を理解しようとしています。私はTwitterBootstrapを使用しており、基本的に2つのバージョンのメディアクエリがあります。

@media (min-width: 980px) { ... } <!-- Desktops -->
@media (max-width: 979px) { ... } <!-- Smaller screens/tablets/phones -->

作成した地図がありますが、モバイル/小画面バージョンの広葉草本と幅の理由で表示されていません。それでも、モバイル画面に表示されていなくても、JavaScriptはバックグラウンドで実行されます。だから、私はjavascriptで次のようなことができる方法を見つけようとしています：

// Imaginary function
var screenType = getScreenType();

if(screenType == 1) {
   // Load map
}

メディアクエリでCSSプロパティを特定の値に設定し、CSSプロパティに基づいてDOMでその要素を見つけようとする人々について読んだことがありますが、もっと良い方法が必要です。何か案は？

4

4 に答える 4

32

現在受け入れられている回答は十分ではありません。window.matchMediaを確認する必要があります

ビューポートの寸法の変化を検出することはできますが、向きやアスペクト比などの要素を計算する必要があり、メディアクエリルールを適用するときに、計算がブラウザの仮定と一致する保証はありません。

つまり、Xを計算することはできますが、ブラウザーの仮定はYにすることができます。したがって、同じブラウザールールを使用する方が良いと思いますが、window.matchMediaがそれを実行します。

var jmediaquery = window.matchMedia( "(min-width: 480px)" )
if (jmediaquery.matches) {
    // window width is at least 480px
}
else {
    // window width is less than 480px
}

リスナーを使用してクエリ通知を受信することもできます

var jmediaquery = window.matchMedia("(orientation: portrait)");
jmediaquery.addListener(handleOrientationChange);
handleOrientationChange(jmediaquery);

function handleOrientationChange(jmediaquery) {
    if (jmediaquery.matches) {
        // orientation changed
    }
}

変更に関する通知を受け取る必要がなくなった場合は、removeListener（）を呼び出すだけです。

jmediaquery.removeListener(handleOrientationChange);
于 2013-08-11T16:55:52.117 に答える
12

Enquire.jsライブラリが役立つ場合があります。

http://wickynilliams.github.com/enquire.js/

CSS-トリックの記事：http ：//css-tricks.com/enquire-js-media-query-callbacks-in-javascript/

于 2012-10-22T16:40:56.450 に答える
2

そのためにJavaScriptを使用するのはどうですか？

<script type="text/javascript">

if (screen.width < 980) { 

document.write('<link href="UrLowRes.css" type="text/css" rel="stylesheet"/>');

} else { 

document.write('<link href="UrlHighRes.css" type="text/css" rel="stylesheet"/>');

} 

</script>
于 2012-10-22T16:33:55.420 に答える
1

minwidthというプラグインを使用することもできます。

minwidth(940, function () {
  //do whatever you need
});

ただし、サイズ変更時ではなく、ページが読み込まれた場合にのみ機能します。

http://edenspiekermann.com/en/blog/sensitive-javascript-helpers

于 2012-10-22T16:38:51.513 に答える