memocarilog

JavaScript のメソッド window.matchMedia を使用すると、CSS3 の MediaQuery のようにウィンドウサイズで JavaScript のコードを分けて使用する事が可能です。window.matchMedia の使い方・対応ブラウザなどのメモです。

window.matchMedia は MediaQueryList オブジェクト（MediaQueryList – Web API インターフェイス | MDN）を返すメソッドです。

サンプルデモまでのリンク→ウィンドウサイズによってテキストの内容を変更するサンプルデモ

使い方

matches でウィンドウサイズとマッチするかを簡単に調べる

matches プロパティを使うと、指定したウィンドウサイズとマッチしたら true マッチしなければ false を返してくれます。ウィンドウサイズの指定の仕方は CSS の MediaQuery と同じ感じです。

window.matchMedia('(マッチするウィンドウサイズ)').matches

例1）ウィンドウサイズが 500px 以下の場合アラートを表示する

if( window.matchMedia('(max-width:500px)').matches ){
	alert('500px以下です');
}

例2）ウィンドウサイズが 500px 以上 900px 以下の場合アラートを表示する

if( window.matchMedia("(min-width: 500px) and (max-width: 900px)").matches ){
	alert('500px 以上 900px 以下です');
}

例3）端末が縦（portrait）か横（landscape）かを判定して縦向きだったらアラートを表示する

if( window.matchMedia("(orientation:portrait)").matches ){
	alert('縦方向です');
}

addListener でメディアクエリにリスナーを追加する

addListener を使ってメディアクエリにリスナーを追加し、ウィンドウが指定したウィンドウサイズに変化した時に関数を実行する事ができます。

window.matchMedia("(マッチするウィンドウサイズ)").addListener( 関数名 );

例）ウィンドウサイズが 800px 以下になったらアラートを出す

window.matchMedia("(max-width:800px)").addListener( myFunc );
function myFunc(){
    alert('800px 以下です');
}

対応ブラウザ

window.matchMedia が使えるのは以下のブラウザで IE9 以下や Opera Mini 、Android Browser 3以下では使えません。

IE 10 以上 / Firefox 6.0 以上 / Chrome 9.0 以上 / Safari 5.1 以上 / Opera 12.1 以上 / iOS Safari 6.0-6.1 以上 / Android Browser 4 以上 / Blackberry Browser / Opera Mobile / Chrome for Android / Firefox for Android / IE Mobile

Can I use matchMediaより

addListener はもっと対応ブラウザが限られ、Chrome と Firefox 、IE10 のみになっています。

非対応ブラウザで使う場合

非対応ブラウザで window.matchMedia を使いたい場合は、「matchMedia.js」を利用します。以下のページよりコードを取得できます。

paulirish/matchMedia.js · GitHub

matchMedia.js の使い方

matchMedia.js の使い方は簡単で、matchMedia.js ファイルを読み込むだけです。addListener を使いたい時は一緒に公開されている matchMedia.addListener.js を読み込めばOKです。

<script src="matchMedia.js"></script>
<script src="matchMedia.addListener.js"></script>
<script>
	…JSコード…
</script>

「matchMedia.js」の利用によりIE8以外の主要なブラウザ（以下ブラウザ）で window.matchMedia が使用可能になります。

IE 9, Firefox 3.5 – 5.0, Chrome 4.0 – 8.0, Safari 4 – 5.0, Opera 9.5 – 12.0, iOS 3.2 – 4.3, Android 2.1 – 2.3, Opera mini 10.0 – 12.0, Blackberry 7.0

サンプルデモ

ウィンドウサイズによってテキストの内容を変更するという処理を、jQuery、JavaScript のイベントリスナー、 JavaScript で addListener を使ってそれぞれ行っています。「matchMedia.js」を利用して非対応ブラウザにも対応させてみました。（addListener はウィンドウサイズを変更しないとテキスト変更処理がされません。）

◆ matchMedia.js を使って表示を変える｜memocarilog

サンプルデモ HTML コード

<h1>jQuery - matchMedia.matches</h1>
	<p id="test1">matchMedia で表示を変える。</p>
<hr>

<h1>JavaScript - matchMedia.matches</h1>
	<p id="test2">matchMedia で表示を変える。</p>
<hr>

<h1>JavaScript - matchMedia.addListener</h1>
	<p id="test3">matchMedia で表示を変える。</p>

サンプルデモ JavaSctript コード

<script src="matchMedia.js"></script>
<script src="matchMedia.addListener.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>

// jQuery - matchMedia.matches ========================

$(function(){
    if(window.matchMedia('(max-width:2000px)').matches) $('#test1').text('2000px以下です。') ; 

    $(window).on('resize', function() {
        if(window.matchMedia('(max-width:800px)').matches) {
            $('#test1').text('モバイルサイズ時(800px以下)です。') ;
        } else {
            $('#test1').text('PCサイズ時(800px以上)です。') ;
        }
    });
});

// JavaScript - matchMedia.matches ========================

window.addEventListener('load', function(){
    if (window.matchMedia("(max-width:2000px)").matches){
        document.getElementById("test2").innerHTML = "2000px以下です。";
    }
}, false);

window.addEventListener('resize', function(){
    if (window.matchMedia("(max-width:800px)").matches) {
		document.getElementById("test2").innerHTML = "モバイルサイズ時(800px以下)です。";
	} else {
		document.getElementById("test2").innerHTML = "PCサイズ時(800px以上)です。";
	} 

}, false);

// JavaScript - matchMedia.addListener ========================

window.matchMedia("(max-width:800px)").addListener( myFunc );

function myFunc(){
    document.getElementById("test3").innerHTML = "モバイルサイズ時(800px以下)です。";

    if (window.matchMedia("(min-width:800px)").matches) {
		document.getElementById("test3").innerHTML = "PCサイズ時(800px以上)です。";
	}
}

</script>