blob: cce7bfcb84a2741d96ce9e7b35446ed9b41b7207 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
---
title: プログラムによるメディアクエリのテスト
slug: Web/CSS/Media_Queries/Testing_media_queries
tags:
- Advanced
- CSS
- DOM
- Guide
- JavaScript
- MediaQueryList
- matchMedia
- ウェブ
- メディアクエリ
- レスポンシブデザイン
translation_of: Web/CSS/Media_Queries/Testing_media_queries
---
<div>{{cssref}}</div>
<p>{{Glossary("DOM")}} では、 {{domxref("MediaQueryList") }} インタフェースおよびそのメソッドやプロパティを用いて、<a href="/ja/docs/Web/CSS/Media_Queries">メディアクエリ</a>の結果をプログラムで調べることができる機能を備えています。 {{domxref("MediaQueryList") }} オブジェクトを作成すると、クエリの結果を確認すること、あるいは結果が変化したときに自動的に通知を受け取ることができます。</p>
<h2 id="Creating_a_media_query_list" name="Creating_a_media_query_list">メディアクエリリストの作成</h2>
<p>クエリの結果を評価できるようにするのに先立ち、メディアクエリを示す {{domxref("MediaQueryList") }} オブジェクトを作成する必要があります。オブジェクトを作成するには、{{domxref("window.matchMedia") }} メソッドを用います。</p>
<p>例えば、デバイスが横置きか縦置きかを調べるクエリリストを設定したい場合は、以下のようにしてください:</p>
<pre class="brush: js">var mediaQueryList = window.matchMedia("(orientation: portrait)");
</pre>
<h2 id="Checking_the_result_of_a_query" name="Checking_the_result_of_a_query">クエリの結果の確認</h2>
<p>メディアクエリリストが作成されると、その <code>matches</code> プロパティの値を参照することで、クエリの結果を確認することができます。このプロパティは、クエリの結果を反映します。</p>
<pre class="brush: js">if (mediaQueryList.matches) {
/* 現在ビューポートが縦長である */
} else {
/* 現在ビューポートが縦長ではない、すなわち横長である */
}
</pre>
<h2 id="Receiving_query_notifications" name="Receiving_query_notifications">クエリの通知の受信</h2>
<p>クエリの評価結果の変化を継続的に意識する必要がある場合は、クエリの結果をポーリングするよりも<a href="/ja/docs/Web/API/EventTarget/addEventListener">リスナー</a>を登録することが効率的です。このためには、 {{domxref("MediaQueryList") }} オブジェクトの <code>addListener()</code> メソッドを呼び出し、メディアクエリの状態が変化したときに (例えば、メディアクエリの結果が <code>true</code> から <code>false</code> へ移行した場合に) 呼び出されるコールバック関数を設定してください。</p>
<pre class="brush: js">var mediaQueryList = window.matchMedia("(orientation: portrait)"); // Create the query list.
function handleOrientationChange(mql) { ... } // イベントリスナーにコールバック関数を定義
mediaQueryList.addListener(handleOrientationChange); // クエリリストにコールバック関数をリスナーとして追加
handleOrientationChange(mediaQueryList); // 画面の向きが変更された時のハンドラーを一度実行。
</pre>
<p>このコードではデバイスの向き (orientation) を評価するメディアクエリリストを作成し、次にリスナーを追加しています。リスナーを追加した後、そのリスナーが実際に一度呼び出されることに注意してください。これにより、リスナーは現在のデバイスの向きを基にして初期状態の調整を行うことができます (そうでなければ、コードではデバイスの初期状態が縦置きと想定しているが実際は横置きであるような場合に、不整合が発生します)。</p>
<p>次で実装する <code>handleOrientationChange()</code> メソッドでは、クエリの結果の確認やデバイスの向きが変わったときに必要な処理を行います。</p>
<pre class="brush: js">function handleOrientationChange(evt) {
if (evt.matches) {
/* 現在ビューポートが縦長 */
} else {
/* 現在ビューポートが横長 */
}
}
</pre>
<p>上記で、 <code>evt</code> — イベントオブジェクトの引数を定義しています。これは <a href="/ja/docs/Web/API/MediaQueryList#Browser_compatibility"><code>MediaQueryList</code> の新しい実装</a>を扱うイベントリスナーの標準の方法なのでお分かりでしょう。非標準の {{domxref("MediaQueryListListener")}} メカニズムはもう使われませんが、標準のイベントリスナーのセットアップでは、 {{domxref("MediaQueryListEvent")}} の<a href="/en-US/docs/Web/API/Event">イベントオブジェクト</a>をコールバック関数の引数として渡します。</p>
<p>このイベントオブジェクトは {{domxref("MediaQueryListEvent.media","media")}} 及び {{domxref("MediaQueryListEvent.match","match")}} プロパティも含んでおり、 <code>MediaQueryList</code> のこれらの機能に直接アクセスしたり、イベントオブジェクトにアクセスしたりすることができます。</p>
<h2 id="Ending_query_notifications" name="Ending_query_notifications">クエリの通知の終了</h2>
<p>メディアクエリの値の変化について通知を受ける必要がなくなったときは、{{domxref("MediaQueryList") }} オブジェクトの <code>removeListener()</code> メソッドを呼び出してください。</p>
<pre class="brush: js">mediaQueryList.removeListener(handleOrientationChange);
</pre>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
<h3 id="MediaQueryList_インターフェイス"><code>MediaQueryList</code> インターフェイス</h3>
<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
<p>{{Compat("api.MediaQueryList")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li><a href="/ja/docs/Web/CSS/Media_queries">メディアクエリ</a></li>
<li>{{domxref("window.matchMedia()") }}</li>
<li>{{domxref("MediaQueryList") }}</li>
<li>{{domxref("MediaQueryListEvent") }}</li>
</ul>
|
