画面の向き

W3C 作業草案

この文書の詳細
このバージョン:
https://www.w3.org/TR/2025/WD-screen-orientation-20251016/
最新の公開版:
https://www.w3.org/TR/screen-orientation/
最新の編集者ドラフト:
https://w3c.github.io/screen-orientation/
履歴:
https://www.w3.org/standards/history/screen-orientation/
コミット履歴
テストスイート:
https://wpt.live/screen-orientation/
編集者:
Marcos Cáceres (Apple Inc.)
前編集者:
Mounir Lamouri (Google Inc.)
Johanna Herman (招待専門家)
フィードバック:
GitHub w3c/screen-orientation (プルリクエスト, 新しい Issue, オープンな Issue)
ブラウザのサポート:
caniuse.com

Copyright © 2025 World Wide Web Consortium. W3C® liability, trademark and permissive document license rules apply.

概要

The 画面の向き 仕様は、デバイスの画面の向きの種類と角度を標準化し、それをロックおよびロック解除する手段を提供します。 この仕様で定義された API は、デバイスの画面の向きの現在の種類と角度を公開し、変更時にイベントを発行します。これにより、Web アプリケーションは CSS と連携して複数の画面の向きに合わせてユーザー体験をプログラム的に適応させることができます。API はまた、特定の前提条件の下で画面の向きをロックすることも可能にします。これは、ユーザーが物理的にデバイスを回転させても画面の向き自体は変えたくないコンピュータゲームのようなアプリケーションで特に有用です。

この文書のステータス

このセクションは、本書が公開された時点でのステータスを説明します。現在の W3C の出版物一覧や、この技術レポートの最新版は、 W3C 標準および草案一覧 で確認できます。

本書は作業中の文書です。

本書は Web Applications Working Group によって、 勧告プロセス を用いて ワーキングドラフトとして公開されました。

ワーキングドラフトとしての公開は、W3C およびその会員による支持を意味するものではありません。

本書はドラフト文書であり、今後いつでも他の文書によって更新、差し替え、または廃止される可能性があります。進行中の作業以外のものとして本書を引用することは適切ではありません。

本書は W3C 特許ポリシーのもとで活動するグループによって作成されました。 W3C は、 グループの成果物に関連して提出された特許開示の公開リスト を管理しています。そのページには特許の開示方法も記載されています。ある者が必須特許請求項を含むと信じる特許を実際に知っている場合、 必須請求項 を含むと信じる場合は、 W3C特許ポリシー第6節 に従ってその情報を開示しなければなりません。

本書は 2025年8月18日 W3C プロセス文書 に従って管理されています。

1. 使用例

このセクションは規範的ではありません。

この例では、「ロック」ボタンをクリックするとフルスクリーンになり、画面が反対の向きにロックされます。 「アンロック」ボタンをクリックすると画面のロックが解除されます。

例1: 特定の向きにロックし解除する 
<script>
function updateLockButton() {
  const lockButton = document.getElementById("button");
  const newOrientation = getOppositeOrientation();
  lockButton.textContent = `Lock to ${newOrientation}`;
}

function getOppositeOrientation() {
  return screen
    .orientation
    .type
    .startsWith("portrait") ? "landscape" : "portrait";
}

async function rotate(lockButton) {
  if (!document.fullscreenElement) {
    await document.documentElement.requestFullscreen();
  }
  const newOrientation = getOppositeOrientation();
  await screen.orientation.lock(newOrientation);
  updateLockButton(lockButton);
}

screen.orientation.addEventListener("change", updateLockButton);

window.addEventListener("load", updateLockButton);
</script>

<button onclick="rotate(this)" id="button">
  ロックする...
</button>
<button onclick="screen.orientation.unlock()">
  アンロック
</button>

2. 概念

画面の向きをロックするとは、OrientationLockType orientation に対して、ユーザーが画面を特定の 画面の向き にしか回転できないようにすることを意味します。他の向きへの回転が制限される場合もあります。画面を回転できる向きは、ユーザーエージェント、ユーザーの設定、オペレーティングシステムの慣例、または画面自体によって決まります。例えば、 横向き にロックすると、ユーザーは画面を 横向き（主） やシステムが許せば 横向き（副） に回転できますが、 縦向き（副） には向きません。

画面の向きをアンロックするとは、エンドユーザーが、システムが許す任意の 画面の向き に自由に画面を回転できるようにすることを意味します。

2.1 画面の向きの種類

画面は、以下のいずれかの 画面の向き であるか、ロック されることがあります。

Any
ユーザーは、デバイスのオペレーティングシステムやエンドユーザーによって許可された任意の向きに画面を回転できます。
Default（アンロック時）
画面がアンロックされているとき（すなわち、有効な向きロックがnullである場合）のデバイスのデフォルト挙動です。この向きは、デバイスのオペレーティングシステムやユーザーエージェント、エンドユーザー、あるいは インストールされたウェブアプリケーション によって決定されることがあります。例えば、画面の向きがアンロックされていてユーザーがデバイスを回転させた場合、一部のデバイスでは向きの変更が portrait-primary、 landscape-primary、 landscape-secondary のみ許可され、portrait-secondary にはならない場合があります。
Landscape
画面のアスペクト比の幅が高さより大きい状態です。
Natural
ユーザーエージェント、ユーザー、オペレーティングシステム、または画面自体によって決定されるデバイスディスプレイにとって最も自然な向きです。例えば、ユーザーの手でデバイスを立てて持ち、画面がユーザーに向いている状態です。コンピュータモニターは一般的に landscape-primary が自然な向きですが、携帯電話は多くの場合 portrait-primary が自然な向きです。
Portrait
画面のアスペクト比の高さが幅より大きい状態です。
Primary
デバイスの画面の自然な向き（portrait または landscape のいずれか）です。
Secondary
デバイスの画面のprimary向きとは逆の portrait または landscape です。

2.2 現在の画面の向きの種類と角度

出力デバイスの画面には、次の概念が関連付けられています:

アクティブな向きロック
画面がロックされている画面の向き（OrientationLockTypeとして表される）、またはアンロック時はnull。
現在の向きの角度
画面が自然な向きから反時計回りに回転している角度（度）。この角度は画面の向き値リストから導出されます。
現在の向きタイプ
画面の画面の向き（OrientationTypeとして表される）。

下記の画面の向き値リストは、異なる自然な向きを持つ画面における各画面の向きタイプに関連付けられる角度を標準化します:

自然な縦向きの画面の場合:
自然な横向きの画面の場合:

3. Document インターフェースへの拡張

3.1 内部スロット

Document インターフェイスは、次の内部スロットで拡張されます:

内部スロット 説明
[[orientationPendingPromise]] null または Promise のいずれかです。 Promise が割り当てられている場合、そのプロミスは画面の向きをロックするリクエストを表します。

4. Screen インターフェースへの拡張 

WebIDLpartial interface Screen {
  [SameObject] readonly attribute ScreenOrientation orientation;
};

Window オブジェクトには、関連付けられた ScreenOrientationがあり、これは Screen の orientation オブジェクト（すなわち ScreenOrientation インスタンス、window.screen.orientation）です。

5. ScreenOrientation インターフェース 

WebIDL[Exposed=Window]
interface ScreenOrientation : EventTarget {
  Promise<undefined> lock(OrientationLockType orientation);
  undefined unlock();
  readonly attribute OrientationType type;
  readonly attribute unsigned short angle;
  attribute EventHandler onchange;
};

5.1 内部スロット

内部スロット 説明
[[angle]] 画面の最後に認識された現在の向きの角度（度単位）を、 unsigned short として 画面の向き値リストから導出して表します。
[[initialType]] 現在の向きタイプを、閲覧コンテキストが作成された時点での値として表します。
[[type]] 画面の最後に認識された現在の向きタイプを OrientationType 列挙値として表します。

5.2 lock() メソッド

lock() メソッドが OrientationLockType orientation を伴って呼び出されたとき、ユーザーエージェントは MUST 以下の手順を実行しなければなりません。

ユーザーエージェントは、MAY document およびそれに関連付けられた 閲覧コンテキストが、一つまたは複数の ロック前条件 を満たすことを要求してもよいです。詳細は、 10. Webアプリケーションマニフェストとの相互作用 および 9. フルスクリーンAPIとの相互作用 を参照してください。

  1. document に、this の 関連グローバルオブジェクト の 関連付けられた Document を代入します。
  2. document で 共通安全性チェック を実行します。 例外 が スロー された場合、その例外で 却下されたプロミス を返してこれらの手順を中止します。
  3. If the user agent does not support locking the screen orientation to orientation, その例外で却下されたプロミスを返す（"NotSupportedError" の DOMException）。これらの手順を中止します。
  4. document の [[orientationPendingPromise]] が null でない場合、現在のロックプロミスを却下しnullにする を document で "AbortError" で実行します。
  5. document の [[orientationPendingPromise]] に 新しいプロミス を設定します。
  6. 向きロックを適用 を orientation と document で実行します。
  7. document の [[orientationPendingPromise]] を返します。

5.3 unlock() メソッド

unlock() メソッドが呼び出されたとき、ユーザーエージェントは MUST 次の手順を実行しなければなりません:

  1. document に this の 関連グローバルオブジェクト の 関連付けられた Document を代入します。
  2. document で 共通安全性チェック を実行します。例外 が スロー された場合、その例外を再スローし、これらの手順を中止します。
  3. screen の アクティブな向きロック が null の場合、 undefined を返します。
  4. document の [[orientationPendingPromise]] が null でない場合、現在のロックプロミスを却下しnullにする を document で "AbortError" で実行します。
  5. 向きロックを適用 を null と document で実行します。
注: なぜ unlock() は Promise を返さないのか？

unlock() は Promise を返しません。なぜなら、これは デフォルトの画面の向き にロックすることと同義ですが、 ユーザーエージェント がその向きを知っている場合と知らない場合があるためです。そのため、ユーザーエージェント は新たな向きがどうなるか、あるいは実際に変化するかどうかすら予測できません。

5.4 共通の安全チェック

共通安全性チェックは、Document document に対して次の手順を実行します。

  1. document が 完全にアクティブ でない場合、throw を使い "InvalidStateError" DOMException を投げます。
  2. document が サンドボックス化された向きロック閲覧コンテキストフラグ を持っている場合、 throw を使い "SecurityError" DOMException を投げます。
  3. document の visibility state が "hidden" の場合、throw を使い "SecurityError" DOMException を投げます。

5.5 type 属性

取得時、type 属性は this の [[type]] を返します。

5.6 angle 属性

取得時、angle 属性は this の [[angle]] を返します。

注: angle の値は何を表すか？

5.7 onchange イベントハンドラ属性

onchange 属性は、イベントハンドラIDL属性です。 onchange イベントハンドラに対応し、 そのイベントハンドラのイベント型は change です。

6. OrientationLockType 列挙型 

WebIDLenum OrientationLockType {
  "any",
  "natural",
  "landscape",
  "portrait",
  "portrait-primary",
  "portrait-secondary",
  "landscape-primary",
  "landscape-secondary"
};

OrientationLockType 列挙型は、画面が潜在的に ロック され得る画面の向きを表します。

注: 向きのサポート

7. OrientationType 列挙型 

WebIDLenum OrientationType {
  "portrait-primary",
  "portrait-secondary",
  "landscape-primary",
  "landscape-secondary"
};

OrientationType 列挙値は、画面の現在の向きの種類を表すために使用されます。

8. アルゴリズム

8.1 ScreenOrientation オブジェクトの初期化

閲覧コンテキスト context が作成されるとき、ユーザーエージェントは MUST 以下を実行しなければなりません:

  1. screenOrientation を context の 関連付けられた ScreenOrientation にします。
  2. screenOrientation の [[initialType]] 内部スロットを、画面の 現在の向きの種類 に初期化します。
  3. screenOrientation の [[type]] 内部スロットを、画面の 現在の向きの種類 に初期化します。
  4. screenOrientation の [[angle]] 内部スロットを、画面の 現在の向きの角度 に初期化します。

8.2 ドキュメントの現在のロックプロミスを拒否する

手順で、現在のロックプロミスを却下しnullにすることが Document document と DOMString exceptionName で要求された場合、ユーザーエージェントは MUST 以下を実行しなければなりません:

  1. アサート: [[orientationPendingPromise]] は null でないこと。
  2. promise に、document の [[orientationPendingPromise]] を代入します。
  3. グローバルタスクをキューに追加します。DOM操作タスクソース上で document の 関連グローバルオブジェクトを用い、reject を使い promise を新しい exceptionName の DOMException で拒否します。
  4. document の [[orientationPendingPromise]] を null に設定します。

8.3 向きのロックを適用する

手順で 向きロックを適用することが OrientationLockType? orientation と Document document に対して要求された場合、 ユーザーエージェントは MUST 以下の手順を実行しなければなりません:

  1. document が 完全にアクティブでなくなり、かつ 並列で、[[orientationPendingPromise]] が null でない場合、現在のロックプロミスを却下しnullにする を document に対して "AbortError" で実行します。
  2. topDocument に document の 最上位の閲覧コンテキスト の アクティブドキュメント を代入します。
  3. descendantDocs に、順序付き集合として topDocument の子孫ナビゲーブルの アクティブドキュメント（存在する場合）をツリー順で格納します。
  4. 各 doc を descendantDocs から順に:
    1. doc が document であれば、続行。
    2. doc の [[orientationPendingPromise]] が null であれば、続行。
    3. 現在のロックプロミスを却下しnullにする を doc に対して "AbortError" で実行します。
  5. 次のサブステップを並列で実行します:
    1. document が 完全にアクティブ でなくなり、 document の [[orientationPendingPromise]] が null でない場合、現在のロックプロミスを却下しnullにする を document に対して "AbortError" で実行し、これらの手順を中止します。
    2. orientation が null であれば、画面の向きをアンロックする を実行します。
    3. それ以外の場合、画面の向きをロックする を orientation で試みます。プラットフォームの慣習に応じて、ビューポートの描画方法を orientation に合わせて変更します。
    4. ユーザーの以前の設定、プラットフォーム制限、またはその他の理由により試行が失敗した場合:
      1. 画面のアクティブな向きロック を null に設定します。
      2. タスクをキューに追加します。DOM操作タスクソース 上で document の関連グローバルオブジェクトを使って:
        1. document の [[orientationPendingPromise]] が null でなければ、 現在のロックプロミスを却下しnullにする を document に対して "NotSupportedError" で実行します。
        2. これらの手順を中止します。
      注

      これは、ユーザーがウェブアプリケーションによる画面の向き変更を禁止する設定にしている場合や、ユーザーエージェントではなく基盤となるプラットフォームが指定の orientation へのロックを許可していない場合などに発生することがあります。

    5. 画面のアクティブな向きロックを orientation に設定し、 現在の向きタイプ および 現在の向きの角度 を 画面の向き の変化を反映して更新します。
  6. グローバルタスクをキューに追加します。DOM操作タスクソース 上で document の 関連グローバルオブジェクト を用いて:
    1. promise に document の [[orientationPendingPromise]] を代入します。
      注
    2. document の [[orientationPendingPromise]] を null に設定します。
    3. 画面の向き変更手順 を topDocument で実行します。
    4. promise が null でなければ、resolve を使い promise を undefined で解決します。

8.4 画面の向きの変更

ユーザーエージェントが 最上位の閲覧コンテキスト の画面の向きが変化したと判断した場合、またはユーザーが 最上位の閲覧コンテキスト を別の画面に移動した場合、画面の向き変更手順 を、その 最上位の閲覧コンテキスト の アクティブドキュメント で実行します。

画面の向き変更手順は、 Document document に対して次の通りです:

  1. document の visibility state が "hidden" の場合、これらの手順を中止します。
  2. type および angle に、画面の 現在の向きタイプ と 現在の向きの角度 を代入します。
  3. screenOrientation に document の 関連グローバルオブジェクト の 関連付けられた ScreenOrientation を代入します。
  4. type が screenOrientation の [[type]] と等しく、かつ angle が screenOrientation の [[angle]] と等しい場合、これらの手順を中止します。
  5. グローバルタスクをキューに追加します。ユーザーインタラクションタスクソース上で document の 関連グローバルオブジェクト を用い、次の手順を実行します:
    1. screenOrientation の [[angle]] を angle に設定します。
    2. screenOrientation の [[type]] を type に設定します。
    3. "change" という名前のイベントを screenOrientation に発火します。
  6. descendantDocs に、順序付き集合として document の 子孫ナビゲーブル の アクティブドキュメント（ツリー順、存在する場合）を格納します。
  7. 各 doc を descendantDocs から順に、画面の向き変更手順 を doc で実行します。

8.5 ページの表示状態の変更の処理

[HTML] の「可視状態を更新する」アルゴリズムは、画面の向き変更手順を実行します。

注

8.6 ドキュメントのアンロードの処理

アンロードドキュメントクリーンアップ手順 が document で実行されるとき、ユーザーエージェントは MUST 次の手順を実行しなければなりません:

  1. document が 最上位の閲覧コンテキスト の アクティブドキュメント でない場合、これらの手順を中止します。
  2. 画面の向きを完全にアンロックする手順 を document で実行します。

8.7 向きの完全なロック解除

画面の向きを完全にアンロックする手順 は、Document document に対して次の通りです:

  1. document の [[orientationPendingPromise]] が null でない場合、現在のロックプロミスを却下しnullにする を document に対して "AbortError" で実行します。
  2. topDocument に document の 最上位の閲覧コンテキスト の アクティブドキュメント を代入します。
  3. 向きロックを適用 を null と topDocument で実行します。

9. フルスクリーン API との相互作用

ユーザーエージェントは、SHOULD、lock() の使用を 単純なフルスクリーンドキュメントに制限するべきです。これはロック前条件の一つです。[fullscreen]

document がフルスクリーンを終了するとき、画面の向きを完全にアンロックする手順 も実行されます。[fullscreen]

10. Web アプリケーションマニフェストとの相互作用

Web Application Manifest 仕様は、ウェブアプリケーションが デフォルトの画面の向き を orientation メンバーで設定できるようにします。

ユーザーエージェントは SHOULD、インストール済みウェブアプリケーション が「fullscreen」display mode で表示されることをロック前条件として要求するべきです。

11. アクセシビリティに関する考慮事項

車椅子のアーム等にデバイスが固定された向きで設置されているユーザーがいる可能性があるため、画面の向きをロックする際にユーザーがデバイスを回転させることを前提とする開発者は、Web コンテンツアクセシビリティ ガイドライン (WCAG) 2.1 の Orientation 成功基準 を認識しておく必要があります。該当の基準は、コンテンツと機能が 画面の向き にかかわらず利用可能であることを 必須 としています。特定の向きが 重要 である場合、ウェブアプリケーションはユーザーに向きの要件を通知しなければなりません。

12. プライバシーおよびセキュリティに関する考慮事項

画面のtypeおよび angleは、フィンガープリンティングのベクトルとなり得ます。以下の緩和策は、デバイスがどのように保持されているかを開示しないことでユーザーのプライバシーを保護し、またsecondaryな向きタイプやそれに関連する角度がフィンガープリンティング目的で利用されることを防ぎます。

フィンガープリンティングへの耐性（例: プライベートブラウジング）として、ユーザーエージェントはMAY（してもよい）:

  1. 1つの最上位の閲覧コンテキストの存続期間中、画面の自然な向きを [[initialType]]であるかのように振る舞う。
  2. typeゲッターの返り値を 「portrait-primary」または 「landscape-primary」に制限する。どちらを返すかは画面のアスペクト比で決定する。
  3. 現在の向きタイプが [[initialType]]と一致する場合、angleゲッターで0を返す。それ以外の場合は90を返す。
  4. 画面の向きが変化した場合、changeイベントは 現在の向きタイプがportraitから landscapeに、またはその逆に変化した時のみ発火する。

13. 適合性

非規範と明記されたセクションに加えて、この仕様書中のすべての著作ガイドライン、図、例、および注記は非規範です。それ以外の内容はすべて規範となります。

この文書中のキーワード MAY、MUST、および SHOULD は、 BCP 14 [RFC2119] [RFC8174] に記載されている通り、ここに示すようにすべて大文字で出現した場合に限り、その意味で解釈されます。

A. IDL インデックス

WebIDLpartial interface Screen {
  [SameObject] readonly attribute ScreenOrientation orientation;
};

[Exposed=Window]
interface ScreenOrientation : EventTarget {
  Promise<undefined> lock(OrientationLockType orientation);
  undefined unlock();
  readonly attribute OrientationType type;
  readonly attribute unsigned short angle;
  attribute EventHandler onchange;
};

enum OrientationLockType {
  "any",
  "natural",
  "landscape",
  "portrait",
  "portrait-primary",
  "portrait-secondary",
  "landscape-primary",
  "landscape-secondary"
};

enum OrientationType {
  "portrait-primary",
  "portrait-secondary",
  "landscape-primary",
  "landscape-secondary"
};

B. 索引

B.1 本仕様で定義された用語

B.2 参照で定義された用語

C. 謝辞

Christophe Dumez、Anne van Kesteren、Chundong Wang、Fuqiao Xue、 および Chaals McCathie Nevile に有益なコメントをいただいたことに感謝します。

本 API の初期設計への貢献に対し、Chris Jones および Jonas Sicking に特に感謝します。

D. 参考文献

D.1 規範的参考文献

[appmanifest]
Web Application Manifest。Marcos Caceres、Kenneth Christiansen、Diego Gonzalez-Zuniga、Daniel Murphy、Christian Liebel。W3C。2025年9月3日。W3C作業草案。URL: https://www.w3.org/TR/appmanifest/
[cssom-view]
CSSOM View Module。Simon Fraser、Emilio Cobos Álvarez。W3C。2025年9月16日。W3C作業草案。URL: https://www.w3.org/TR/cssom-view-1/
[dom]
DOM Standard。Anne van Kesteren。WHATWG。リビングスタンダード。URL: https://dom.spec.whatwg.org/
[fullscreen]
Fullscreen API Standard。Philip Jägenstedt。WHATWG。リビングスタンダード。URL: https://fullscreen.spec.whatwg.org/
[HTML]
HTML Standard。Anne van Kesteren、Domenic Denicola、Dominic Farolino、Ian Hickson、Philip Jägenstedt、Simon Pieters。WHATWG。リビングスタンダード。URL: https://html.spec.whatwg.org/multipage/
[infra]
Infra Standard。Anne van Kesteren、Domenic Denicola。WHATWG。リビングスタンダード。URL: https://infra.spec.whatwg.org/
[mediaqueries-5]
Media Queries Level 5。Dean Jackson、Florian Rivoal、Tab Atkins Jr.、Daniel Libby。W3C。2021年12月18日。W3C作業草案。URL: https://www.w3.org/TR/mediaqueries-5/
[RFC2119]
Key words for use in RFCs to Indicate Requirement Levels。S. Bradner。IETF。1997年3月。Best Current Practice。URL: https://www.rfc-editor.org/rfc/rfc2119
[RFC8174]
Ambiguity of Uppercase vs Lowercase in RFC 2119 Key Words。B. Leiba。IETF。2017年5月。Best Current Practice。URL: https://www.rfc-editor.org/rfc/rfc8174
[WCAG21]
Web Content Accessibility Guidelines (WCAG) 2.1。Michael Cooper、Andrew Kirkpatrick、Joshue O'Connor、Alastair Campbell。W3C。2025年5月6日。W3C勧告。URL: https://www.w3.org/TR/WCAG21/
[WEBIDL]
Web IDL Standard。Edgar Chen、Timothy Gu。WHATWG。リビングスタンダード。URL: https://webidl.spec.whatwg.org/