blob: 0d547b627679bd6063a479cd706e4208edbd414a (
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
|
---
title: display_override
slug: Web/Manifest/display_override
tags:
- マニフェスト
- ウェブ
- display
- display_override
browser-compat: html.manifest.display_override
translation_of: Web/Manifest/display_override
---
{{QuickLinksWithSubpages("/ja/docs/Web/Manifest")}}
<table class="properties">
<tbody>
<tr>
<th scope="row">型</th>
<td><code>Array</code></td>
</tr>
<tr>
<th scope="row">必須</th>
<td>いいえ</td>
</tr>
</tbody>
</table>
[`display`](/ja/docs/Web/Manifest/display) メンバーは、開発者が推奨するウェブサイトの表示モードを決定するために使用されます。これは、要求された表示モードに対応していない場合に、ブラウザーが事次善の表示モードに代替するプロセスに従います。高度な用途では、この代替プロセスでは十分でない場合があります。
`display_override` メンバーは、 `display` メンバーを使用する前にブラウザーが考慮する一連の表示モードを開発者に提供することで、これを解決しています。この値は表示モードの配列であり、順番に考慮され、最初にサポートされた表示モードが適用されます。
## 値
表示上書きオブジェクトは表示モード文字列の集合で、利用可能な値は以下の通りです。
<table class="fullwidth-table standard-table">
<thead>
<tr>
<th scope="col">表示モード</th>
<th scope="col">説明</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>fullscreen</code></td>
<td>
利用可能な画面の領域をすべて使用し、ユーザーエージェントの{{Glossary("chrome", "クローム")}}は表示されなくなります。
</td>
</tr>
<tr>
<td><code>standalone</code></td>
<td>
アプリケーションの外見は、単独のアプリケーションのようになります。これは、アプリケーションに別のウィンドウを持たせたり、アプリケーションランチャーに独自のアイコンを追加したりすることができるようになります。このモードでは、ユーザーエージェントはナビゲーションを制御するための UI 要素を除外しますが、ステータスバーなどの他の UI 要素を含めることはできます。
</td>
</tr>
<tr>
<td><code>minimal-ui</code></td>
<td>
アプリケーションの外見は、単独のアプリケーションのようになりますが、ナビゲーションを制御するために最小限の UI 要素が表示されます。要素はブラウザーによって異なります。
</td>
</tr>
<tr>
<td><code>browser</code></td>
<td>
アプリケーションはブラウザーやプラットフォームに応じた一般的なブラウザータブや新しいウインドウで表示されます。これが既定値です。
</td>
</tr>
<tr>
<td><code>window-controls-overlay</code></td>
<td>
この表示モードは、アプリケーションが別の PWA ウィンドウにあり、デスクトップ OS 上にある場合にのみ適用されます。この場合、ウィンドウ制御のオーバーレイ機能が利用できるようにします。これは、ウィンドウの全領域がアプリのウェブコンテンツに使用され、ウィンドウの制御ボタン（最大化、最小化、閉じる、およびその他の PWA 固有のボタン）がウェブコンテンツの上にオーバーレイとして表示されるものです。
</td>
</tr>
</tbody>
</table>
## 例
以下の例では、ブラウザーは以下の表示モード代替チェーンを `fullscreen` → `minimal-ui` → `standalone` の順番で考慮します。
```json
{
"display_override": ["fullscreen", "minimal-ui"],
"display": "standalone",
}
```
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- [Preparing for the display modes of tomorrow](https://web.dev/display-override/)
- [Customize the window controls overlay of your PWA's title bar](https://web.dev/window-controls-overlay/)
|
