クイックアンサー
iPhone DuoのSafariで起きる問題は、各画面で利用できる表示領域と、Webサイト側のレイアウト設計の両方が原因になり得ます。
コンパクトな外側画面では、ツールバー、バナー、キーボードが表示されると、コンテンツに使える領域がさらに狭くなります。
Duoを開けば表示領域は広がりますが、その空間を有効活用できるかどうかはWebサイトの設計次第です。
モバイル版で必要な機能が隠れている場合は「デスクトップ用Webサイトを表示」を試す価値があります。ただし、操作ボタンが小さくなりすぎることもあります。
ほかの設定を変更する前に、使用中の画面でモバイル表示とデスクトップ表示を比較してください。
外側画面でSafariが窮屈に感じる理由
ZEERAが 10月22日に公開したiPhone Duoのアプリ最適化に関する記事 で指摘したのは、ソフトウェアは単に画面を埋めればよいわけではないという点です。Safariでは、ブラウザと各サードパーティWebサイトの両方が体験を左右するため、問題はさらに複雑になります。
外側画面では、幅と同じくらい利用可能な高さが重要です。Webサイトのヘッダー、Cookieバナー、画面下部に固定されたバーが重なると、記事が見える範囲はわずかになります。検索やフォーム入力でキーボードを開けば、表示領域はさらに狭くなります。読む・入力する空間が足りないことが直接の原因なら、デスクトップモードに切り替えても改善しにくいでしょう。
Duoを開いた後にWebサイト表示が崩れる理由
Webページは複数の仕組みを使って表示内容を決めます。以下はレイアウトが合わなくなる主な可能性であり、実際の原因は問題が起きているWebサイトによって異なります。
レイアウトが特定の画面幅で切り替わる
レスポンシブサイトは、ブラウザ幅が一定の値を超えると1カラムから広いレイアウトへ切り替わります。物理的に大きな画面でも、Webサイトが設定した基準幅を必ず超えるとは限りません。超えた場合でも、記事が大きくなるのではなくサイドバーが追加されるだけのこともあります。
Webサイトが別のモバイル表示を提供している
一部のWebサイトは、ブラウザ情報を使って表示するコンテンツや機能を選びます。機能が制限されたモバイル版が選択されたままだと、画面が広くなっても非表示のナビゲーションパネルや編集ツールは現れないことがあります。Appleの 開発者向けガイダンス では、ブラウザ名に依存せず、利用可能な機能を検出する方法が推奨されています。
一部の要素が新しい表示領域に追従しない
固定幅の表、埋め込みビューア、メニューは、ページのほかの部分とは異なる動きをすることがあります。折りたたみや回転の後だけ問題が起きる場合は、最終的に使う状態でページを再読み込みし、表示を比較してください。これは状態切り替えに関係する問題を見分ける手掛かりになりますが、それだけで特定のSafariバグだと断定はできません。
WebKitの ブラウザサイズの変化に関するガイダンス では、レスポンシブレイアウトとメディアクエリまたはコンテナクエリの重要性が説明されています。Duoで重要なのは、すべてのiPhoneを縦長の長方形だと想定せず、利用可能な領域に合わせてWebサイトが正しく動作することです。
iPhone DuoのSafariでデスクトップモードを試す方法
- 問題が起きているWebサイトをSafariで開きます。
- アドレス／検索フィールド横の ページメニュー ボタンをタップします。
- 利用できる場合は 「デスクトップ用Webサイトを表示」を選びます。必要に応じて 「メニューをカスタマイズ」 で使用可能な操作を確認してください。
- その表示を使い続ける前に、必要な機能、文字サイズ、タッチ操作のしやすさを比較します。
Appleはこの操作を Safari設定ガイドで案内しています。これはWebサイトに別の表示形式を要求する機能です。サイト側が提供していないレイアウトや機能を追加することはできません。
デスクトップ向け機能が見つからない場合に試してください。 アカウント管理画面やドキュメントサービスでは、デスクトップ表示のほうが多くの機能を利用できる場合があります。 外側画面で通常の記事を読む場合は慎重に選んでください。 カラム数が増え、リンクが小さくなり、メニューが密集すると、かえって読みにくくなります。デスクトップ風のページでも、指での操作が快適とは限りません。
レイアウトがまだ使いにくい場合の対処法
1. 文字サイズを判断する前にページズームを確認する
ページメニュー → ページズームを開きます。まず100%に戻して基準を確認し、その後読みやすい倍率に調整してください。Appleのガイドでは、Duoを開いた状態で「拡大」「縮小」「実際のサイズ」を選べます。ズームは読みやすさを改善しますが、ページから省かれた機能を復元するものではありません。
2. 記事を読むときは表示要素を減らす
利用できる場合は「リーダーを表示」を試してください。「ツールバーを非表示」にすると表示領域を広げられ、画面下部をタップすれば再表示できます。リーダー表示は対応する読み物ページ向けで、操作の多いダッシュボードには適していません。
3. 使用したい状態で再読み込みして比較する
Duoを開閉した後にページがずれる場合は、入力途中の内容を保存し、最終的に使う状態で再読み込みしてください。同じURLの同じ部分を比較します。再読み込み後に改善するなら、画面サイズの変化を処理する際の問題が考えられます。変わらない場合は、Webサイトのレイアウトや表示モードを確認してください。
4. ページレイアウトと指の届きにくさを分けて考える
メニューが正しく表示されていても、開いたDuoでは反対側まで指が届きにくいことがあります。その場合は、ZEERAの 片手操作ガイド で持ち方と操作方法を確認してください。Webサイトの表示を変更する意味があるのは、操作ボタンがより使いやすい位置に移動する場合です。
より優れたサードパーティWebサイト対応に必要なこと
本当に必要な改善は連続性です。外側画面でページを見つけ、Duoを開いて作業を始めても、読んでいた位置を失わず、インターフェースに悩まされず続けられることが重要です。優れたレイアウトは文字を読みやすく保ち、メニューを操作しやすい位置に置き、表や文書に広い領域を活用します。
Safariは、Duoが抱えるソフトウェア対応の課題を日常的に実感しやすい例だとZEERAは考えます。Appleはブラウザを管理しますが、ページ設計と多くの動作はWebサイト運営者が管理します。表示上の不具合はブラウザ更新で修正できる場合がありますが、固定幅フォームや不適切なモバイルテンプレートにはWebサイト側の更新が必要です。
開発者は、WebKitの レスポンシブデザインモードのガイダンス を、さまざまな寸法やアスペクト比を検証する出発点として利用できます。キーボード表示時、メニューを開いた状態、端末上でレイアウトが切り替わる過程もテストすべきです。2つの固定サイズでホームページが正常に見えるだけでは十分ではありません。
よくある質問
なぜ特定のWebサイトだけで問題が起きるのですか？
Webサイトごとに使用するテンプレート、スクリプト、埋め込みサービスが異なります。同じ画面状態でほかのサイトが正常に動作する場合は、問題のURL、画面状態、再現手順をそのWebサイトに報告してください。Duoを開く前後のスクリーンショットがあると調査しやすくなります。
ホーム画面に追加したWebアプリでレイアウトは直りますか？
Webサイトをホーム画面に追加しても、それだけでコンテンツのレイアウトが作り直されるわけではありません。起動方法やウインドウ表示が変わる場合はありますが、元のWebサイトには利用可能な領域で動作するレイアウトが必要です。
関連記事
