Alexis Menard
公開日: 2025 年 6 月 9 日
Viewport Segments API を使用すると、JavaScript または CSS でビューポートの論理的に分離された領域の位置とサイズにアクセスできます。この API は Chrome 138 以降で利用できます。
ビューポート セグメントは、ビューポートが分割され、分割点として機能する 1 つ以上のハードウェア機能（折り目や個別のディスプレイ間のヒンジなど）によって分割された場合に作成されます。
セグメントは、サイトやアプリを開発する際に論理的に区別できるビューポートの領域です。これらの優れた API を使用すると、折りたたみ式デバイス専用のインターフェースを作成または最適化できます。たとえば、デュアルペインのユーザー エクスペリエンスを作成したり、折り目を超えてコンテンツがレイアウトされないようにしたりします。
昨年実施したオリジン トライアルから、2 つの変更が加えられています。
- JavaScript 属性
segmentsは、window.visualViewportではなく、新しく追加されたwindow.viewportオブジェクトに配置されるようになりました。 - デバイスが折りたたまれているときの
segmentsプロパティの動作が、この機能の CSS 動作に合わせて調整されました。デバイスが折りたたまれていない（または折りたたむことができない）場合、segmentsプロパティには、ビューポートのサイズ全体を表す単一のセグメントの配列が含まれます。
折りたたみ式デバイスのデモで、API の動作を確認できます。
