端末形態 API

概念と使用法

折り曲げ式端末は、開発者にとって独特の設計上の課題が存在します。通常の平らな画面として、あるいは本のように使用できます。さらに、単一の折り曲げ式画面を備えた機種もあれば、中央に蝶番で接続された 2 つの画面を備えた機種もあります。物理的な接続部分によってコンテンツが隠れたり、中央の折り目付近に近接しているため読みづらくなったりしないよう、注意を払う必要があります。

端末形態 API は、端末の現在の物理的な折り曲げ状態を示す形態を定義します。現在利用できる形態は以下の通りです。

continuous

平らな画面状態を示します。折り曲げ可能な端末は、完全に開いた状態または完全に閉じられた状態など、平らな状態にある間は常にcontinuousです。折り曲げ可能でない端末は平らな状態と見なされ、常にcontinuousです。これには継ぎ目のない曲面ディスプレイや、標準的なデスクトップ、ノートパソコン、タブレット、モバイル端末の画面があります。

folded

折り曲げられた状態を示します。折り曲げ可能な端末は、ブックモードやラップトップモードで使用している間、folded 状態になります。

端末形態 API には、現在の端末の形態や形態の変化に応じて、スクリプトを実行したりレイアウトを変更したりすることができる機能が含まれています。

CSS の機能

device-posture @media 特性

端末の現在の形態を検出します。

インターフェイス

DevicePosture

端末の形態を表し、現在の形態を表す type へのアクセスと、形態変更時に発生する change イベントを提供します。

他のインターフェイスへの拡張

Navigator.devicePosture

端末形態 API のエントリーポイントである、ブラウザーの DevicePosture オブジェクトを返します。

例

すべての機能が動作している完全な例は、Device Posture API デモでご覧いただけます。

可能な限り、折り曲げ可能な端末でご覧ください。現在のブラウザー開発者ツールでは折り曲げ可能な端末のエミュレーションができるものの、半開き状態の端末のエミュレーションは含まれていません（完全に開いた状態か閉じられた状態のみ）。そのため、常にcontinuousを返します。

仕様書

ブラウザーの互換性

関連情報

• ビューポートセグメント API
• Origin trial for Foldable APIs - developer.chrome.com (2024)