2026年10月28日

iPhone Duo の Safari で Web アプリをどう対応させるか

Apple は Web 向けの適合ガイドをまだ公開していません。現時点で信頼できる唯一の公式資料は WebKit ブログです。レスポンシブ設計を土台に、Device Posture API と Viewport Segments API で折りたたみ状態を扱い、外側ディスプレイ側面のコントロール領域も忘れないでください。

対応ガイドSafari

2026 年 10 月 28 日時点で、Apple は iPhone Duo の Web 向け適合ガイドを公開していません。唯一の公式な技術解説は、10 月 23 日に公開された WebKit ブログの「WebKit Features for Safari 27.1」です。

結論は一言でまとまります。「新しいことは何もない」。iPhone Duo の Safari は他の iPhone と同じ WebKit、同じ Web 技術で動いており、サイトも Web アプリもこれまでどおり動作します。専用のバージョンを作る必要はありません。

ただし「これまでどおり動く」は「何もしなくてよい」という意味ではありません。以下、実装しやすい順に、ビューポートの範囲、折りたたみ画面向けレイアウトの基本、Safari が引き受ける唯一の挙動、もっとも混同しやすい「折りたたみ状態の判定」と「折りたたみ端末かどうかの判定」、最後にチェックリストをまとめます。

1. まずビューポート:382〜951

WebKit は Safari 27.1 の各姿勢におけるビューポート表を公開しています（CSS ピクセル）。

姿勢	幅	SVH	LVH
外側ディスプレイ、縦	382	580	618
外側ディスプレイ、横	594	368	406
内側ディスプレイ、縦（タブ 1 つ）	669	867	902
内側ディスプレイ、横（タブ 1 つ）	951	585	620
内側ディスプレイ、横に 2 ウィンドウ（各）	385	571	609

ポイントは 3 つです。

幅は 382〜951、高さは 368〜902。 他の iPhone と範囲が重なるため、幅だけで機種は判別できません。
内側ディスプレイではタブバーが上部に来ます（iPad や Mac と同じ）。外側ディスプレイでは下部で、他の iPhone と同じです。スクロールするとタブバーは縮みます。
内側ディスプレイの横表示では 2 ウィンドウを並べられ、各ウィンドウは狭い縦向きビューポート（幅 385）になります。

これらの数値をコードに書く必要はありません。メディアクエリと Grid / Flex の流動レイアウトで 382〜951 の全域をカバーすれば十分です。

2. iPhone Duo の折りたたみ画面向け Web 対応:まずレスポンシブ、UA 判定はしない

WebKit の推奨は明確です。UA スニッフィングで端末を判定せず、機能検出を使ってください。UA が不確かなだけでなく、姿勢の変化は UA に現れず、Duo のビューポートは通常の iPhone と重なるからです。

折りたたみ画面向け対応の第一層は、ごく普通のレスポンシブ設計です。

.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

見落としやすい点を 2 つ補います。

高さに 100vh を使わない。 表の SVH / LVH の列が示すとおりブラウザのツールバーは伸縮します。svh、lvh、dvh を優先してください。
ブレークポイントは端末ではなく内容の幅で決める。 「Duo の内側は 669」より、320 / 480 / 720 のような汎用ブレークポイントのほうが安定し、機種が変わっても修正が要りません。

3. Safari の折りたたみ対応:システムが引き受けるのは PDF だけ

Safari 27.1 がユーザー向けに変えたのは 1 点だけです。本のように半折りした状態で Web の PDF を見ると、Safari が自動で 2 ページを左右に並べます。平らに開くか完全に閉じると 1 ページに戻ります。

これはブラウザの挙動で、サイト側の作業はなく、CSS で制御もできません。したがって Safari の折りたたみ対応の中心は PDF ではなく、「ビューポートが変わってもレイアウトが崩れない」「移動したコントロールが内容を隠さない」の 2 点です。

それ以外に、Safari が折りたたみ向けの「自動段組み」や「自動リフロー」を追加しているわけではありません。半折り時に内容を左右へ分けたい場合は、次の 2 つの API を自分で使います。

4. Web で折りたたみ状態を判定する:Device Posture API

Safari 27.1 は iPhone Duo 上で Device Posture API と Viewport Segments API を開発者プレビューとして提供します。既定では無効です。有効化は設定 > App > Safari > 詳細 > 機能フラグで、「Device Posture API」と「Viewport Segments API」の両方をオンにします。

Device Posture API の値は 2 つだけです。

folded:端末が部分的に折りたたまれている状態（本やノート PC の姿勢）;
continuous:画面が平らな状態（完全に開いた場合と完全に閉じた場合の両方）。

CSS ではメディアクエリを使います。

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

JavaScript では navigator.devicePosture.type を読み、change イベントを監視します。

function reportPosture() {
  console.log(`Device posture: ${navigator.devicePosture.type}`);
}

reportPosture();
navigator.devicePosture.addEventListener("change", reportPosture);

必ず覚えておきたい境界があります。continuous は「完全に開いた状態」と「完全に閉じた状態」を 1 つの値にまとめています。つまりこの API は「今は半折りか」には答えられますが、「今は内側か外側か」には答えられません。

5. Web で折りたたみ端末かどうかを判定する:確実な方法はなく、判定すべきでもない

ここがもっとも間違えやすい部分です。Device Posture API が表すのは現在の姿勢であり、端末の識別ではありません。

通常の iPhone では navigator.devicePosture が存在しない可能性があります。
折りたたみ端末を完全に平らに開くと type は continuous になり、通常の iPhone と区別できません。
UA 文字列も使えません。WebKit は UA スニッフィングを明確に推奨していません。

厳密に言えば、Web で折りたたみ端末かどうかを判定する公式な方法は現時点でありません。できるのは機能検出であり、端末判定ではありません。

const hasPosture = "devicePosture" in navigator;
const segments = window.viewport?.segments ?? [];

window.viewport.segments が 2 つ返ったとしても、それは「現在の画面が折り目で 2 つに分かれている」ことしか示しません。内側ディスプレイの横表示で 2 ウィンドウを並べた場合も 2 つのビューポートになります。

正しい考え方は「端末を判定する」を捨てて「使える空間を判定する」に変えることです。空間が足りれば 2 カラム、足りなければ 1 カラム。半折りで API が使えるときだけ折り目に合わせます。こうしておけば、将来どんな形態が出てもレイアウトを書き直さずに済みます。

6. Viewport Segments:折り目を実際に避けられる API

Viewport Segments API は折り目両側の「セグメント」を表します。機能フラグをオンにすると、Safari 27.1 は 2 つのメディアクエリに対応します。

horizontal-viewport-segments: 2:左右に並ぶ（本の姿勢）;
vertical-viewport-segments: 2:上下に積み重なる（ノート PC の姿勢）。

各セグメントの端にぴったり合わせるため、API は 6 つの環境変数を追加します。viewport-segment-width、viewport-segment-height、viewport-segment-top、viewport-segment-right、viewport-segment-bottom、viewport-segment-left です。それぞれ 2 つのインデックスを取り、列、行の順で左上の 0 0 から数えます。左右に並ぶときは左が 0 0、右が 1 0。上下に積まれるときは上が 0 0、下が 0 1 です。

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

JavaScript 側では window.viewport.segments が DOMRect の配列を返します。姿勢の変化やウィンドウのリサイズ時に読み直します。

function reportSegments() {
  window.viewport.segments.forEach((segment, i) => {
    console.log(`Segment ${i}: ${segment.width}px × ${segment.height}px`);
  });
}

reportSegments();
navigator.devicePosture.addEventListener("change", reportSegments);
window.addEventListener("resize", reportSegments);

注意点として、どちらの API も現在は機能フラグの背後にあり、実際のユーザーには既定で無効です。あくまで強化手段として扱い、唯一のレイアウト手段にしないでください。フラグがオフでもページは完全に読める必要があり、それを支えるのは第 2 節のレスポンシブレイアウトです。

7. 外側ディスプレイの側面コントロール:今できるのは背景色だけ

外側ディスプレイは他の iPhone より広く低いため、iOS は縦の空間を内容に残すべくコントロールを側面へ移します。

Safari 27.1 では、Web の内容は現時点でコントロールの背後まで広がりません。Safari はページの背景色を読み取り、その周囲の空間をその色で埋めます。WebKit はこの領域を開放することを検討しており、viewport-fit=cover を方向性として挙げていますが、多くのサイトが四辺のセーフエリアを正しく処理できていないことも認めており、より確実な方法を模索中で、結論は出ていません。

公式な仕組みが登場するまでは、小さくできることが 3 つあります。

body にページ上部と同じ背景色を指定し、側面に不自然な色の差を作らない。
固定要素には env(safe-area-inset-*) で余白を取る。画面端に貼り付けない。
上部のスティッキーナビゲーションに注意。内側ディスプレイではタブバーが上部にあるため、同じ場所を取り合わないようにする。

8. Web ページを iPhone Duo に適合させるチェックリスト

メディアクエリで 382〜951px をカバーし、ブレークポイントは端末ではなく内容幅で決める;
高さは svh / lvh / dvh を使い、100vh は使わない;
@media (device-posture: folded) で半折り時の段組みを強化し、非対応時は 1 カラムを保つ;
折り目に合わせて配置する場合は、Viewport Segments の env() で両側を揃える;
折りたたみ関連のスタイルはすべて機能検出の後ろに置き、フラグがオフでもページが完全であること;
Xcode 27.1 以降の Device Hub シミュレータで各姿勢を試し、実機を待たない。

9. 実機なしでテストする

WebKit は、iPhone Duo を手元に用意する必要はないと明言しています。Xcode 27.1 以降をダウンロードし、Device Hub で iPhone Duo のシミュレータを作成してください。シミュレータ内の Safari で機能フラグをオンにすれば、姿勢とセグメントを確認できます。

確認したい姿勢は、外側の縦・横、内側の縦・横、内側の横 2 ウィンドウ、半折りの本姿勢、半折りのノート PC 姿勢です。見るべき点は 3 つ。内容が折り目やコントロールに隠れていないか、開閉で状態が失われないか、2 カラムが幅 385px のウィンドウで破綻しないか。

10. 参考

WebKit Features for Safari 27.1（WebKit ブログ、2026 年 10 月 23 日）
Device Posture API（MDN）
Viewport Segments API（MDN）
Alternatives to UA sniffing（MDN）

Apple の公式 Web 対応ガイドはまだ公開されていません。本記事は 2026 年 10 月 23 日時点の WebKit ブログに基づいており、公式ドキュメントが公開された場合はそちらを優先します。ここで触れていない問題がサイトで発生した場合は、フッターのフィードバックフォームからお知らせください。