iPhone Duo 向けに、Device Posture API と Viewport Segments API を機能フラグのプレビューとして載せる。PDF を半分折りの姿勢で見ると 2 ページ並びになるのはブラウザ側の表示で、サイトの実装変更は要らない。外側と内側の画面を合わせたビューポート幅は CSS ピクセルで 382 から 951、高さは 368 から 902。シミュレータは Xcode 27.1 以降の Device Hub。

フラグは Settings > Apps > Safari > Advanced > Feature Flags の「Device Posture API」と「Viewport Segments API」。

#Device Posture API

device-posture は folded（本やノートのように途中まで折った状態）と continuous（平ら。全開と全閉を含む）の二つ。navigator.devicePosture.type と change で同じ値を読む。

css
@media (device-posture: folded) {
  .layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

#Viewport Segments API

horizontal-viewport-segments と vertical-viewport-segments が分割数に一致する。各セグメントの寸法は env(viewport-segment-width 0 0) のように列、行の順。横並びの右は 1 0、縦積みの下は 0 1。window.viewport.segments はセグメントごとの DOMRect。

css
@media (horizontal-viewport-segments: 2) {
  .wrapper {
    display: grid;
    grid-template-columns:
      env(viewport-segment-width 0 0)
      env(viewport-segment-width 1 0);
  }
}

#参考文献