Viewport Segments API で折りたたみ式デバイスをサポートする

Alexis Menard

公開日: 2025 年 6 月 9 日

Viewport Segments API は、JavaScript または CSS を使用して、ビューポートの論理的に分離された領域の位置と寸法にアクセスする手段を提供します。この API は Chrome 138 から利用できます。

ビューポート セグメントは、ビューポートが 1 つ以上のハードウェア機能（分割線として機能する、別々のディスプレイ間の折り目やヒンジなど）によって分割されたときに作成されます。

セグメントは、サイトやアプリの開発時に論理的に区別して扱うことができるビューポートの領域です。これらのエキサイティングな API を使用すると、折りたたみ式デバイス専用のインターフェースを作成または最適化できます。たとえば、2 つのペインでユーザー エクスペリエンスを作成したり、コンテンツがファーストビューをまたいでレイアウトされないようにしたりできます。

昨年実施したオリジン トライアルから、次の 2 つの変更が行われました。

• JavaScript 属性 segments は、window.visualViewport ではなく、新しく追加された window.viewport オブジェクトに配置されるようになりました。
• デバイスが折りたたまれていない場合の segments プロパティの動作が、この機能の CSS の動作と一致するようになりました。デバイスが折りたたまれていない（または折りたためない）場合、segments プロパティには、ビューポート全体のサイズを表す単一のセグメントの配列が含まれます。

折りたたみ式デバイスのデモで、API の動作を確認してください。