Pixel Foldの登場で注目、CSSで折りたたみデバイス対応を実現する方法

Designing for Dual Screen and Foldable Devices with CSS (2023)

GoogleのPixel Fold発表を機に、折りたたみデバイス向けのCSS技術を解説。horizontal-viewport-segmentsやvertical-viewport-segmentsといったメディアクエリと、viewport-segment-*環境変数を使えば、デバイスごとの画面寸法を気にせず二画面レイアウトを組める。著者はSurface DuoでPowerPointの発表者ノートを下画面に表示する活用例を紹介。2023年の折りたたみ出荷台数は2100万台超の見込みだが、現状Edge Stableのみ対応でChromeは未対応という課題も指摘する。