blob: 3b68effd7d3fddfd996ec73b95c4c05d80f326f0 (
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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
|
---
title: '@viewport'
slug: Web/CSS/@viewport
tags:
- '@viewport'
- At-rule
- CSS
- Experimental
- Layout
- Mobile
- Reference
- Screen Layout
- viewport
translation_of: Web/CSS/@viewport
---
<div>{{CSSRef}}{{deprecated_header}}</div>
<div class="blockIndicator note">
<p><strong>注</strong>: <a href="https://github.com/w3c/csswg-drafts/issues/4766">https://github.com/w3c/csswg-drafts/issues/4766</a> に @viewport を標準路線から除外することに関する議論があります。</p>
</div>
<p><strong><code>@viewport</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/At-rule">アット規則</a>で、文書を通して表示するための{{glossary("viewport", "ビューポート")}}を構成することができます。第一にモバイル端末のために使用されますが、 (Microsoft Edge などの) "snap to edge" のような機能に対応するデスクトップブラウザーでも使用されます。</p>
<p>パーセント値で指定された長さは、<strong>初期ビューポート</strong>からの相対で計算されます。これはユーザーエージェントや記述されたスタイルがビューポートを調整する機会を持つ前のビューポートです。これはふつう、デスクトップブラウザーのウィンドウの寸法に基づくもので、全画面モードのものではありません。</p>
<p>モバイル端末 (または全画面モードのデスクトップ端末) では、初期ビューポートはふつう端末の画面のうちアプリケーションが利用できる部分です。これは全画面の場合もあれば、全画面からオペレーティングシステムが制御する領域 (タスクバーなど) を引いた部分の場合、アプリケーションが利用できる画面領域 (全画面又は画面からオペレーティングシステムやその他のアプリケーションが所有する領域を引いた部分) の場合もあります。</p>
<pre class="brush: css no-line-numbers notranslate">@viewport {
width: 100vw; /*実際のビューポートの幅を端末の幅に設定*/
}
</pre>
<div class="blockIndicator note">
<p><strong>メモ</strong>: <code><meta name="viewport"></code> タグを使用すると、 <code>@viewport</code> より優先します。</p>
</div>
<h2 id="Syntax" name="Syntax">構文</h2>
<p>このアット規則は波括弧で囲まれた CSS ブロック内に、一連の入れ子になった{{glossary("descriptor (CSS)", "記述子")}}を含みます。</p>
<p><code>1.0</code> または <code>100%</code> の<em>ズーム倍率</em>はズーム無しに相当します。より大きい値はズームイン、より小さい値はズームアウトになります。</p>
<h3 id="Descriptors" name="Descriptors">記述子</h3>
<p>現時点では <code>@viewport</code> のブラウザーの互換性は弱く、対応は Internet Explorer 及び Edge で広く行われています。これらのブラウザーでも、少数の記述子しか利用できません。 <code>@viewport</code> は対応していないブラウザーからは無視され、理解できない記述子は無視されるでしょう。</p>
<dl>
<dt><a href="/ja/docs/Web/CSS/@viewport/min-width"><code>min-width</code></a></dt>
<dd>文書が最初に表示されたときの、ビューポートの幅を決めるのに使われます。</dd>
<dt><a href="/ja/docs/Web/CSS/@viewport/max-width"><code>max-width</code></a></dt>
<dd>文書が最初に表示されたときの、ビューポートの幅を決めるのに使われます。</dd>
<dt><a href="/ja/docs/Web/CSS/@viewport/width"><code>width</code></a></dt>
<dd><code>min-width</code> と <code>max-width</code> の両方を設定するための一括指定です。</dd>
<dt><a href="/ja/docs/Web/CSS/@viewport/min-height"><code>min-height</code></a></dt>
<dd>文書が最初に表示されたときの、ビューポートの高さを決めるのに使われます。</dd>
<dt><a href="/ja/docs/Web/CSS/@viewport/max-height"><code>max-height</code></a></dt>
<dd>文書が最初に表示されたときの、ビューポートの高さを決めるのに使われます。</dd>
<dt><a href="/ja/docs/Web/CSS/@viewport/height"><code>height</code></a></dt>
<dd><code>min-height</code> と <code>max-height</code> の両方を設定するための一括指定です。</dd>
<dt><a href="/ja/docs/Web/CSS/@viewport/zoom"><code>zoom</code></a></dt>
<dd>ズームの初期値を設定します。</dd>
<dt><a href="/ja/docs/Web/CSS/@viewport/min-zoom"><code>min-zoom</code></a></dt>
<dd>ズームの最小値を設定します。</dd>
<dt><a href="/ja/docs/Web/CSS/@viewport/max-zoom"><code>max-zoom</code></a></dt>
<dd>ズームの最大値を設定します。</dd>
<dt><a href="/ja/docs/Web/CSS/@viewport/user-zoom"><code>user-zoom</code></a></dt>
<dd>ユーザーがズーム倍率を変更できるか否かを制御します。</dd>
<dt><a href="/ja/docs/Web/CSS/@viewport/orientation"><code>orientation</code></a></dt>
<dd>文書の向きを制御します。</dd>
<dt>{{cssxref("@viewport/viewport-fit", "viewport-fit")}}</dt>
<dd>長方形ではないディスプレイでの文書の表示を制御します。</dd>
</dl>
<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
{{csssyntax}}
<h2 id="Examples" name="Examples">例</h2>
<h3 id="Setting_viewport_size_zoom_and_orientation" name="Setting_viewport_size_zoom_and_orientation">ビューポートの大きさ、拡大率、向きの設定</h3>
<pre class="brush: css notranslate">@viewport {
min-width: 640px;
max-width: 800px;
}
@viewport {
zoom: 0.75;
min-zoom: 0.5;
max-zoom: 0.9;
}
@viewport {
orientation: landscape;
}</pre>
<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("CSS Round Display", "#extending-viewport-rule", "@viewport")}}</td>
<td>{{Spec2("CSS Round Display")}}</td>
<td>{{cssxref("@viewport/viewport-fit", "viewport-fit")}} 記述子を定義。</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Device', '#atviewport-rule', '@viewport')}}</td>
<td>{{Spec2('CSS3 Device')}}</td>
<td>初回定義</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
<p>{{Compat("css.at-rules.viewport")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>{{HTMLElement("meta")}}、特に <code><meta name="viewport"></code> の項目</li>
<li><a href="/ja/docs/Mobile/Viewport_meta_tag">モバイルブラウザーでのレイアウトを制御するために meta タグの viewport を使う</a></li>
</ul>
|
