blob: 965ecea48acff847f7a962dcd7b4c298aac61e5f (
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
|
---
title: '@viewport'
slug: Web/CSS/@viewport
tags:
- '@viewport'
- アットルール
- CSS
- 実験的
- レイアウト
- モバイル
- リファレンス
- 画面レイアウト
- ビューポート
browser-compat: css.at-rules.viewport
translation_of: Web/CSS/@viewport
---
{{CSSRef}}{{deprecated_header}}
> **Note:** <https://github.com/w3c/csswg-drafts/issues/4766> に @viewport を標準化路線から除外することに関する議論があります。
**`@viewport`** は [CSS](/ja/docs/Web/CSS) の[アットルール](/ja/docs/Web/CSS/At-rule)で、文書が表示される{{glossary("viewport", "ビューポート")}}を構成することができます。主にモバイル端末のために使用されますが、 (Microsoft Edge などの) "snap to edge" のような機能に対応するデスクトップブラウザーでも使用されます。
パーセント値で指定された長さは、**初期ビューポート**からの相対で計算されます。これはユーザーエージェントや記述されたスタイルがビューポートを調整する機会を持つ前のビューポートです。これはふつう、デスクトップブラウザーのウィンドウの寸法に基づくもので、全画面モードのものではありません。
モバイル端末 (または全画面モードのデスクトップ端末) では、初期ビューポートはふつう端末の画面のうちアプリケーションが利用できる部分です。これは全画面の場合もあれば、全画面からオペレーティングシステムが制御する領域 (タスクバーなど) を引いた部分の場合、アプリケーションが利用できる画面領域 (全画面または画面からオペレーティングシステムやその他のアプリケーションが所有する領域を引いた部分) の場合もあります。
```css
@viewport {
width: 100vw; /*実際のビューポートの幅を端末の幅に設定*/
}
```
> **Note:** `<meta name="viewport">` タグを使用すると、 `@viewport` より優先します。
## 構文
このアットルールは波括弧で囲まれた CSS ブロック内に、一連の入れ子になった{{glossary("descriptor (CSS)", "記述子")}}を含みます。
`1.0` または `100%` の*拡大率*は拡大縮小なしに相当します。より大きい値はズームイン、より小さい値はズームアウトになります。
### 記述子
現時点では `@viewport` のブラウザーの互換性は弱く、対応は Internet Explorer および Edge で広く行われています。これらのブラウザーでも、少数の記述子しか利用できません。 `@viewport` は対応していないブラウザーからは無視され、理解できない記述子は無視されるでしょう。
- `min-width`
- : 文書が最初に表示されたときの、ビューポートの幅を決めるのに使われます。
- `max-width`
- : 文書が最初に表示されたときの、ビューポートの幅を決めるのに使われます。
- `width`
- : `min-width` と `max-width` の両方を設定するための一括指定です。
- `min-height`
- : 文書が最初に表示されたときの、ビューポートの高さを決めるのに使われます。
- `max-height`
- : 文書が最初に表示されたときの、ビューポートの高さを決めるのに使われます。
- `height`
- : `min-height` と `max-height` の両方を設定するための一括指定です。
- `zoom`
- : ズームの初期値を設定します。
- `min-zoom`
- : ズームの最小値を設定します。
- `max-zoom`
- : ズームの最大値を設定します。
- `user-zoom`
- : ユーザーが拡大率を変更できるか否かを制御します。
- `orientation`
- : 文書の向きを制御します。
- `viewport-fit`
- : 長方形ではないディスプレイでの文書の表示を制御します。
## 形式文法
{{csssyntax}}
## 例
### ビューポートの大きさ、拡大率、向きの設定
```css
@viewport {
min-width: 640px;
max-width: 800px;
}
@viewport {
zoom: 0.75;
min-zoom: 0.5;
max-zoom: 0.9;
}
@viewport {
orientation: landscape;
}
```
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- {{HTMLElement("meta")}}、特に `<meta name="viewport">` の項目
- [viewport meta タグによるモバイルブラウザーでのレイアウト制御](/ja/docs/Web/HTML/Viewport_meta_tag)
|
