iPhone DuoのSafari、右側の空間をどう使う？ WebKitが表示方法を検討

表示領域の改善は検討段階。折りたたみ向けAPIも開発者プレビューです。

iPhone Duoの外側画面でSafariを見ると、右側の操作部まで背景色が延びても、本文はそこまで広がりません。WebKitは、この空間をページの表示に生かす方法を検討しています。

右の帯は、縦の表示を確保するためにできた

WebKitによると、横に広く縦に短い外側画面では、内容を縦方向に見せるため操作部を側面に置いています。その右側の帯には現在、背景色だけが延びます。検討されているのは、ヘッダーの背景などにもこの場所を活用する方法です。

ただ広げるだけでは、ページ内の重要な内容とSafariの操作部が重なりかねません。表示に使える面積を増やすことと、押したいものを確実に押せることを両立する必要があります。

背景は端まで、操作する内容には余白を

WebKitがiPhone X向けに説明した安全領域の考え方では、背景を画面端まで描いても、読んだり操作したりする内容には隠れないための余白を設けます。これは今回初めて登場した考え方ではありません。

説明用の想定例として、購入ボタンまで右端に寄せると、システムの操作部と重なって押しにくくなる可能性があります。Duoで実際に起きた不具合の報告ではなく、背景と操作対象を分ける理由を示す例です。

WebKitは既存のviewport-fit=coverも候補に挙げていますが、四辺の安全領域に対応していないサイトがあるため、間違いが起きにくい方法を検討しています。方式の採用や提供時期は未定です。

折りたたみ向けAPIは、姿勢と場所を知らせるもの

Device Posture APIは、画面が部分的に折られているか、連続した平面の状態かをWebサイトへ知らせます。細かな角度を測るためのものではありません。W3C草案には、ノートパソコンのように置いた画面で映像と操作部を分ける設計例がありますが、Duoの特定サービスで実装済みという意味ではありません。

Viewport Segmentsは、分かれた画面領域の位置や幅・高さを扱う仕組みです。CSSの編集者草案が定める情報は、折り目をまたがず、それぞれの領域に内容を収めるための材料になります。

Safari 27.1では両APIとも機能フラグ内の開発者プレビューです。右側の帯をどう描くかという検討とは別の論点で、このAPIを使えば右帯の問題が解決するという説明ではありません。