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は未対応という課題も指摘する。
残念ながら、Chrome Stableはまだ同じサポートを備えていないようで、これはPixel FoldとChromeチームにとって大きな見落としのように思える。
HNでの議論
20- socalgal2
確信は持てないな。
UIを分割するのが便利なら、シングルディスプレイでも自分で分割を選べるようにすべきで、勝手に決められる筋合いはない。自分のラップトップは折りたたみスマホを開いたときと似たアスペクト比だから、ディスプレイの各半分を2ペインに分けるのが便利なら、デバイスに関係なく便利なはずだ。
個人的には、折りたたみスマホを買うなら、既存のコンテンツをもっと大きな画面で見たいから買うんだ。アプリに勝手に決められて2画面扱いされるのは嫌だ。記事で示されているように、viやemacsがアスペクト比に基づいてペインを自動分割するところを想像してほしい。やめてくれ！分割したいときは自分で選ばせてほしい
- ChiperSoft
そしてもちろん、Safariはテックプレビューの時点ではまだこれをサポートしていない。
- DarmokTanagra
Apple Duoの画面UXは、地球全体が右利きだと仮定している。
新しいDuoは、Apple Mouse規模のUX見落としを見せている。