iPhonenのSafariでブラウジングしている際、意図せずデスクトップ用のWebサイトが表示されることがあります。これはSafariの機能なのですが、筆者の周りでは意外と知られていないようです。
細かな仕組みとしては、クライアント(Safari)からのHTTPリクエスト時に、ユーザーエージェント(User-Agent)と呼ばれるHTTPヘッダの値を、デスクトップ用、モバイル用に切り替えることで、Webサーバ側が異なるレスポンス(HTML)を返却しています。
iOS 13.2.3のSafariでデスクトップ用Webサイトをリクエストした際のユーザーエージェントは以下の通りです。なお、とくに断りがない限り、iOS 13.x.xを前提とします。
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Safari/605.1.15
同様に、モバイル用Webサイトをリクエストした際は、以下になります。通常はこちらのユーザーエージェントが使用されます。
Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1
このユーザーエージェントに含まれる文字列をキーとして、モバイル用、デスクトップ用に切り替えているWebサイトも多いです。
なお、仕組みを見ていただければわかるように、たとえば弊サイトのようにブラウザの幅や高さに応じてデザインが動的に変化する仕組みを採用している場合(レスポンシブデザイン)、この機能は意味を成しません。
多くのサイトで、デスクトップ用Webサイトが表示されてしまい元に戻したい場合の対処法として、Safariの「履歴」や「Cookie」を削除する方法が紹介されていますが、Safari、およびその設定だけで簡単に元に戻すことができます。中には、Amazonのように「癖のある」Webサイトもあるのですが、そのような事例も紹介します。
デスクトップ用Webサイト表示、モバイル用Webサイト表示を切り替える
では、実際にYahoo!Japanのトップページを利用して、デスクトップ用Webサイト表示を試してみます。iPhoneのSafariからアクセスすると、通常、以下のように表示されるのではないかと思います。
ところが、ある操作をすることで、PCのブラウザで閲覧するのと同様に、デスクトップ用Webサイトが表示されてしまうことがあります。実は、先ほどの仕組みを利用して、ブラウザ(とWebサーバ側)の機能で意図的に表示が変化しているのですが、元に戻す方法が分からず苦労している人が周囲に多かったため、自分への備忘録も兼ねて戻し方を記しておきたいと思います。
Safariのアドレスバー左にあるテキストアイコンをタップしましょう。さまざまなメニューが表示されますが、その中に「モバイル用Webサイトを表示」というメニューがあるのでタップします。
これで元に戻すことができました。
毎回デスクトップ用Webサイトが表示されてしまう
「モバイル用Webサイトを表示」をタップしたにもかかわらず、次回以降の表示時に再度デスクトップ用Webサイトが表示されることがあります。その場合、先ほどと同様にアドレスバー左のテキストアイコンをクリックして、「Webサイトの設定」をクリックしてみましょう。
iOS 13のSafariでは、Webサイト毎に「デスクトップ用」「モバイル用」のどちらを表示するかを「恒久的に」設定できます。通常は、すべてのWebサイトがモバイル用Webサイトとして表示されるようになっています。常にデスクトップ用Webサイトが表示されてしまう場合、「デスクトップ用Webサイトを表示」がチェックされていないかどうか確認してみましょう。
すべてのWebサイトでデスクトップ用Webサイトが表示されてしまう
前述の通り、デフォルトではすべてのWebサイトで「モバイル用」のユーザエージェントが適用されますが、変更することも可能です。もし、意図せずすべてのWebサイトでデスクトップ用Webサイトが表示されてしまう場合、こちらの設定を疑ってみましょう。
「設定」→「Safari」→「デスクトップ用Webサイトを表示」をタップします。
デフォルトでは、以下の通りすべてのWebサイトで「デスクトップ用Webサイトを表示」は無効です。
もし、以下のように表示されている場合、「ほかのWebサイト」(モバイル用Webサイトとして表示したいサイト)がオフになっていること、もしくは右上の「編集」ボタンをタップして、個別に「デスクトップ用Webサイトを表示」しているWebサイトをスワイプして削除してください。
番外編:Amazon.co.jpをモバイル用Webサイト表示しても元に戻らない?
iPhoneのSafariでAmazon.co.jpのトップ画面を開くと、通常は以下のように表示されます。
これを「デスクトップ用Webサイトを表示」で切り替えてみると、以下のように表示されます。
再度、「モバイル用Webサイトを表示」で切り替えてみます。Amazon.co.jpに関しては、モバイル用の表示に戻りません。
実は、モバイル用にはデスクトップ用にはないメニューが、Amazon.co.jpのトップページに存在します。つまり、厳密にはデスクトップ用からモバイル用に切り替わっているのですが、これは気付かない方も多いのではないでしょうか。
画面最下部に**「Amazon.co.jpモバイルサイト」**というバナーがあり、これをタップすることで最初の画面に戻ります。Amazon.co.jpでは、一度デスクトップ用Webサイトの表示に切り替えた際、切り替えたことをCookieか何かに保存しているのでしょう。
まとめ
Safariで意図せずデスクトップ用Webサイトが表示されてしまい、元に戻すことができず困っている方の参考になればと思います。