Safari 27.1が、折りたたみiPhone「iPhone Duo」の発売に合わせて登場しました。WebKit チームは2026年10月23日付のブログで、ユーザーに見える変更は Safari のPDF表示の1点だけだと説明しています。結論から言うと、半分折って Web 上のPDFを見ると2ページが並び、それ以外の Safari は他の iPhone と同じ。外側画面では、Webページの内容が操作ボタンの裏の余白まで広がらず、背景色で埋められます。Apple は、この余白をWeb側が使える方法を調査中です。
Safari 27.1でPDFが見開きになる条件
半分折るとPDFが2ページ並ぶ
Safari 27.1 では、iPhone Duo を本のように半分折った状態で Web 上のPDFを見ると、自動で2ページが横に並んで表示されます。画面を平らに開くか、完全に閉じると、1ページ表示に戻ります。本を開いたときの見開きと同じ感覚で、設定を触る必要はありません。
それ以外の Safari は他の iPhone と同じ
WebKit のブログは、Safari 27.1 について、他の iPhone と同じ WebKit エンジン、同じ Web 技術で、Web サイトや Web アプリは他の iPhone と同じように動くと説明しています。ユーザーに見える変更はPDFの見開きだけ、という書き方です。
外側と内側のSafariの見え方
画面ごとのタブバーと表示幅
Safari の使い勝手は、開いているか閉じているかで変わります。
| 画面 | 向き | Webページの幅（CSSピクセル） | タブバー |
|---|---|---|---|
| 外側（閉じたとき） | 縦 | 382 | 下（既定） |
| 外側（閉じたとき） | 横 | 594 | 下（既定） |
| 内側（開いたとき、タブ1つ） | 縦 | 669 | 上 |
| 内側（開いたとき、タブ1つ） | 横 | 951 | 上 |
| 内側（横向きで2ウインドウ並べる） | 各ウインドウ | 385 | 上 |
内側を横向きにすると、2つのウインドウを横に並べられます。このとき各ウインドウは、幅の狭い縦長の表示領域になります。スクロールするとタブバーが小さくなってWebページに集中できる点は、他の iPhone と同じです。
外側画面は操作ボタンが横に移る
外側画面は、他の iPhone より横長で高さが短い作りです。縦方向の余裕を確保するため、iOS は操作ボタンを画面の横に移しています。Safari 27.1 では、Webページの内容はこの操作ボタンの裏までは広がりません。代わりに Safari が、ページの背景色を操作ボタン側の余白に延ばして埋めます。お盆の縁まで同じ色のランチョンマットを敷くようなものです。
Safari の余白の使い方をめぐるAppleの調査
WebKit チームは、この余白をWebデザイナーや開発者がもっと創造的に使えるようにしたい、と書いています。たとえば、ヘッダーの背景を画面の端から端まで広げる使い方です。
HTML の viewport meta タグに viewport-fit=”cover” を指定して広げる案はあります。ただ、調べた多くのサイトで四辺の余白調整ができていないため、もっと失敗しにくく使いやすい方法を調査中とのことです。具体的な方法や時期は示されておらず、続報を待ってほしい、アイデアを歓迎すると書かれているだけです。
自社サイトを持つ情シス・開発者向けのメモ
Web を作る側向けに、Safari 27.1 の iPhone Duo では Device Posture API と Viewport Segments API が開発者プレビューとして使えます。どちらも機能フラグの裏にあり、有効にするには、Settings > Apps > Safari > Advanced > Feature Flags で “Device Posture API” と “Viewport Segments API” の両方をオンにします。WebKit のブログの表記です。端末の表示言語によって項目名が異なる場合があります。
- Device Posture API: 画面が半分折られているかを、CSS と JavaScript から調べられる
- Viewport Segments API: 折り目で分かれた表示領域（セグメント）の数や大きさを扱える
実機がなくても、Xcode 27.1 以降の Device Hub で iPhone Duo のシミュレータを作って試せます。WebKit のブログは、レスポンシブデザインの手法で作られたサイトならよく動くとして、端末を判別するユーザーエージェントの判定ではなく、機能の検出を使うよう勧めています。
iPhone Duoで Safari を使う前のおすすめ
- PDFを見開きで読みたいときは、本のように半分折って Web 上のPDFを開く
- 社内サイトは、表示幅が最も狭い外側画面の縦（幅382）と、それに近い内側画面の2ウインドウ表示（幅385）で、念のため崩れないかを見る。公式は数値にこだわらず、レスポンシブデザインで作るよう勧めています
- 外側画面の余白には、Safari がページの背景色を延ばすと分かっておくと、見え方の理由を説明しやすい
- Device Posture API と Viewport Segments API は、今後動作が変わる可能性があると書かれているので、本番サイトでの利用は慎重に考える
- 日本での Safari 27.1 の提供時期は書かれていないので、手元の端末で確認する
ほかのITニュースは、当ブログのITニュースカテゴリーでも読めます。
2026年10月23日付の WebKit ブログに基づく情報です。
参考リンク
ITもごはんも、腹八分目が長続きのコツ！
コメント