blob: 88c93ccac0708cfaac4c1f3b62901ca311b83173 (
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
|
---
title: Screen.availHeight
slug: Web/API/Screen/availHeight
tags:
- API
- CSSOM View
- Property
- Reference
- Screen size
- availHeight
- プロパティ
translation_of: Web/API/Screen/availHeight
---
<p>{{APIRef("CSSOM")}}</p>
<p>{{DOMxRef("Screen")}} インターフェイスの <code><strong>availHeight</strong></code> プロパティは読み取り専用で、画面のウェブコンテンツに利用することができる範囲の高さを、 CSS ピクセル単位で返します。 {{DOMxRef("Screen")}} は {{DOMxRef("Window")}} インターフェイスの {{DOMxRef("Window.screen", "window.screen")}} プロパティから得ることができますので、 <code>availHeight</code> は <code>window.screen.availHeight</code> を使用してアクセスすることができます。</p>
<p>同様に、 {{DOMxRef("Screen.availWidth")}} を使用してブラウザーがウェブコンテンツに利用することができる水平方向のピクセル数を取得することができます。</p>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="syntaxbox notranslate">let <var>availHeight</var> = <var>window</var>.screen.availHeight;
</pre>
<h3 id="Value" name="Value">値</h3>
<p>画面の利用可能な空間の高さを示す CSS ピクセル数を示す数値。これは、 {{DOMxRef("Screen.height", "window.screen.height")}} の値よりも大きくすることはできず、端末やユーザーエージェントがそれ自身のために垂直方向の空間を確保している場合は、より小さくなります。</p>
<p>例えば、 Dock が画面の一番下 (これが既定) にある Mac の場合、 <code>availHeight</code> の値は、下図のように、 <code>height</code> (CSS ピクセル単位の画面全体の高さ) から Dock とメニューバーの高さを差し引いた値になります。</p>
<p><a href="/files/15243/availHeight-diagram.svg"><img alt="Screen.availHeight が Screen.height と画面の内容にどのように関係しているかを示す図" src="https://mdn.mozillademos.org/files/15243/availHeight-diagram.svg" style="height: 312px; width: 500px;"></a></p>
<h2 id="Example" name="Example">例</h2>
<p>ウェブアプリケーションで新しいウィンドウを開く必要がある場合、例えば複数のパネルを含むことができるツールパレットのように、それが利用可能な垂直方向のスペース全体を占めるように配置したい場合、ここで見られるものと同様のコードを使用して行うことができます。</p>
<p>メインウィンドウでは、パネルを開くときに以下のようなコードを使用します。</p>
<pre class="brush: html; notranslate">let paletteWindow = window.open("panels.html", "Panels", "left=0, top=0, width=200");</pre>
<p>Panels ウィンドウの HTML (<code>panels.html</code>) には、独自の JavaScript コードがあり、ウィンドウが作成されるとすぐに実行されます。このコードは、特定のイベント (すべてのイベント) を待つ必要もありません。このコードは、利用可能な空間に基づいてウィンドウの寸法の変更を処理します。</p>
<pre class="brush: js; notranslate">window.outerHeight = window.screen.availHeight;</pre>
<p>結果は以下のようになります。パネルウィンドウが画面の左にある垂直方向の空間をすべて埋めていることに注意してください。</p>
<p><a href="https://mdn.mozillademos.org/files/15247/screen-availHeight.png"><img alt="Screenshot of the example for Screen.availHeight" src="https://mdn.mozillademos.org/files/15247/screen-availHeight.png" style="height: 338px; width: 600px;"></a></p>
<p>Windows システムでは、タスクバーや空間を必要とする他のインターフェイス要素のための空間を残して、利用可能なすべての垂直方向の空間を使用するようにウィンドウを開き、垂直方向に寸法を調整することで、同様に機能します。</p>
<h2 id="Specification" name="Specification">仕様書</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-screen-availheight', 'Screen.availHeight')}}</td>
<td>{{Spec2('CSSOM View')}}</td>
<td>初回定義</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<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.Screen.availHeight")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>{{DOMxRef("Window")}}</li>
<li>{{DOMxRef("Screen")}}</li>
<li>{{DOMxRef("Screen.availWidth")}}</li>
<li>{{DOMxRef("Window.height")}}</li>
</ul>
|
