ビューポートセグメント API

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

ビューポートセグメント API (Viewport Segments API) により、開発者が CSS と JavaScript を使用して、論理的に個別のビューポートセグメントの位置とサイズにアクセスすることができることを可能にします。ビューポートセグメントは、ビューポートが画面の折り曲げや画面間の蝶番などといった、1 つ以上のハードウェア特性によって分割されたときに生成されます。ビューポートセグメント API を使用することで、開発者は異なるビューポートセグメントのサイズや配置に最適化されたレスポンシブデザインを生成することができます。

概念と使用法

同一表示面の異なるセグメントとして機能する、複数の画面を備えた端末（折り曲げ可能、または蝶番のある画面のスマートフォンなど）は、開発者にとって特有の設計上の課題が存在します。レイアウトを単一の表示面として最適化することは可能ですが、デザイン要素が各セグメントにぴったり収まり、分割されないようにするにはどうすればよいでしょうか？また、コンテンツが物理的な折り目や継ぎ目によって隠れるのを防ぐにはどうすればよいでしょうか？

ユーザーの端末画面に折り目や継ぎ目があるかどうか、各セグメントのサイズ、サイズが同一かどうか、セグメントの方向（横に並んでいるか縦に並んでいるか）を知ることは重要かもしれません。ビューポートセグメント API により、CSS および JavaScript の機能を使用してユーザーの分割された端末情報にアクセスすることができます。これには、表示領域内の各ビューポートセグメントの位置とサイズにアクセスする機能が含まれ、@media 機能を利用して異なる水平方向および垂直方向の領域のレイアウトを検出することも可能です。

API の動作に関する説明については、ビューポートセグメント API の使用を参照してください。

インターフェイス

Viewport: 端末のビューポートを表します。Viewport.segments プロパティへのアクセスを提供し、セグメント化された画面内のそれぞれのビューポートセグメントの位置とサイズを表す DOMRect オブジェクトの配列を返します。

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

Window.viewport: 端末のビューポートの現在の状態に関する情報を提供する Viewport オブジェクトインスタンスを返します。

CSS 特性

horizontal-viewport-segments @media 特性: 端末に、水平方向に並んだビューポートセグメントが、指定された数だけあるかどうかを検出します。
vertical-viewport-segments @media 特性: 端末に、垂直方向に並んだビューポートセグメントが、指定された数だけあるかどうかを検出します。
ビューポートセグメントの環境変数: これらの環境変数は、それぞれのビューポートセグメントの端の座標とサイズへのアクセスを提供します。