端末形態 API
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
端末形態 API (Device Posture API) は、開発者が折り曲げ可能な端末の形態に適応し、形態の変化に対応するインターフェースを作成することができるようにします。
概念と使用法
折り曲げ式端末は、開発者にとって独特の設計上の課題が存在します。通常の平らな画面として、あるいは本のように使用できます。さらに、単一の折り曲げ式画面を備えた機種もあれば、中央に蝶番で接続された 2 つの画面を備えた機種もあります。物理的な接続部分によってコンテンツが隠れたり、中央の折り目付近に近接しているため読みづらくなったりしないよう、注意を払う必要があります。
端末形態 API は、端末の現在の物理的な折り曲げ状態を示す形態を定義します。現在利用できる形態は以下の通りです。
continuous-
平らな画面状態を示します。折り曲げ可能な端末は、完全に開いた状態または完全に閉じられた状態など、平らな状態にある間は常に
continuousです。折り曲げ可能でない端末は平らな状態と見なされ、常にcontinuousです。これには継ぎ目のない曲面ディスプレイや、標準的なデスクトップ、ノートパソコン、タブレット、モバイル端末の画面があります。
folded-
折り曲げられた状態を示します。折り曲げ可能な端末は、ブックモードやラップトップモードで使用している間、
folded状態になります。
端末形態 API には、現在の端末の形態や形態の変化に応じて、スクリプトを実行したりレイアウトを変更したりすることができる機能が含まれています。
CSS の機能
device-posture@media特性-
端末の現在の形態を検出します。
インターフェイス
DevicePosture-
端末の形態を表し、現在の形態を表す
typeへのアクセスと、形態変更時に発生するchangeイベントを提供します。
他のインターフェイスへの拡張
-
端末形態 API のエントリーポイントである、ブラウザーの
DevicePostureオブジェクトを返します。
例
すべての機能が動作している完全な例は、Device Posture API デモでご覧いただけます。
可能な限り、折り曲げ可能な端末でご覧ください。現在のブラウザー開発者ツールでは折り曲げ可能な端末のエミュレーションができるものの、半開き状態の端末のエミュレーションは含まれていません(完全に開いた状態か閉じられた状態のみ)。そのため、常にcontinuousを返します。
仕様書
| Specification |
|---|
| Device Posture API> # dom-deviceposture> |
ブラウザーの互換性
関連情報
- ビューポートセグメント API
- Origin trial for Foldable APIs - developer.chrome.com (2024)