blob: a29368376d0d579392492ebb9507c84d09b35ce4 (
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
|
---
title: window.matchMedia
slug: Web/API/Window/matchMedia
tags:
- API
- CSSOM View
- Method
- NeedsMarkupWork
- NeedsSpecTable
- Reference
translation_of: Web/API/Window/matchMedia
---
<div>{{ApiRef}}</div>
<h2 id="Summary" name="Summary">概要</h2>
<p>指定された <a href="/ja/docs/Web/Guide/CSS/Media_queries">メディアクエリ</a>文字列のパース結果を表す、新しい {{domxref("MediaQueryList")}} オブジェクトを返します。</p>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="syntaxbox"><var>mql</var> = window.matchMedia(<em>mediaQueryString</em>)</pre>
<p><code>mediaQueryString</code> は、新しい {{domxref("MediaQueryList")}} オブジェクトを返すための、メディアクエリ文字列です。</p>
<h2 id="Example" name="Example">例</h2>
<pre class="brush:js">if (window.matchMedia( "(min-width: 400px)" ).matches) {
/* ビューポートの幅が 400 ピクセル以上の場合のコードをここに */
} else {
/* ビューポートの幅は 400 ピクセル未満の場合のコードをここに */
}
</pre>
<p>このコードでは、ウィンドウが非常に狭いときに、何か別の処理を行うことができます。</p>
<p>他にも『<a href="/ja/docs/Web/Guide/CSS/Testing_media_queries">コード内でのメディアクエリの使用</a>』にいくつか例があります。</p>
<h2 id="Specifications" name="Specifications">仕様</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">策定状況</th>
<th scope="col">コメント</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSSOM View", "#dom-window-matchmedia", "Window.matchMedia()")}}</td>
<td>{{Spec2("CSSOM View")}}</td>
<td>初期定義</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ互換性</h2>
<div>{{Compat("api.Window.matchMedia")}}</div>
<h2 id="See_also" name="See_also">関連記事</h2>
<ul>
<li><a href="/ja/docs/Web/Guide/CSS/Media_queries">メディアクエリ</a></li>
<li><a href="/ja/docs/Web/CSS/Using_media_queries_from_code">コード内でのメディアクエリの使用</a></li>
<li>{{domxref("MediaQueryList")}}</li>
<li>{{domxref("MediaQueryListListener")}}</li>
</ul>
|
