CSS如何适配Pixel Fold折叠屏
Designing for Dual Screen and Foldable Devices with CSS (2023)
随着Google Pixel Fold的发布，折叠屏设备的设计开发迎来了新机遇。文章介绍了利用CSS媒体查询（如horizontal-viewport-segments和vertical-viewport-segments）以及环境变量（如env(viewport-segment-width)）来适配双屏和折叠设备的技术方案。通过CSS Grid，开发者可以轻松实现跨屏幕的布局调整，无需为每种设备单独设计。虽然目前Chrome Stable尚未完全支持，但Microsoft Edge已提供稳定支持。作者建议，虽然并非所有应用都需要双屏模式，但根据用户数据做出决策，并借助折叠屏设备的独特性提升用户体验，将有助于在竞争激烈的市场中脱颖而出。
折叠屏设备已经到来，为什么不借此机会让你的用户感到惊喜呢？
HN 评论区
20- socalgal2
我不太买账。
如果拆分界面真有用，那应该让我自己决定何时拆分，哪怕是在单块屏幕上，而不是由你来替我决定。我的笔记本电脑展开后的屏幕长宽比就跟折叠屏手机差不多，所以如果将屏幕两半各分成两个窗格有用，那它就应该在任何设备上都有用。
就我个人而言，如果我买了折叠屏手机，那大概率是冲着更大的屏幕来显示现有内容的。我不希望你的应用自作主张，把它当成两块屏幕来处理。想象一下，在 vi 或 emacs 里，文章里展示的那种根据屏幕长宽比自动拆分窗格的功能。拜托，别这样！让我自己决定什么时候需要拆分。
- ChiperSoft
当然，截至目前的测试版，Safari 还不支持这个功能。
- DarmokTanagra
Apple Duo 的屏幕交互设计似乎默认全世界都是右撇子。
新款 Duo 暴露了 Apple Mouse 在交互尺度上的设计疏漏。