Safariのスマホ表示とPC表示って何が違うの?
Webサイトを見ていると、スマホで見た時とパソコンで見た時で表示が違うことに気づいたことはありませんか?
実は、多くのWebサイトには「モバイル版」と「デスクトップ版(PC版)」の2種類の表示方法があります。モバイル版は、スマートフォンの小さな画面でも見やすいように、ボタンが大きくなっていたり、縦長のレイアウトになっていたりするのが特徴です。
一方、デスクトップ版は広い画面で表示することを前提にしているため、より多くの情報が一度に見られるレイアウトになっています。
Safariでは、この2つの表示を自由に切り替えることができるんですよ。iPhoneでPC版を見たり、Macでスマホ版を確認したりと、状況に応じて使い分けられるのが便利なポイントですね。
iPhoneやiPadでPC表示に切り替える方法
スマホを使っていて「PC版の方が見やすいな」と思ったときは、簡単に切り替えられます。
まず、SafariでWebサイトを開いた状態で、アドレスバーの左端にある「ぁあ」というアイコンをタップしましょう。iOS 18以降では四角と線のようなマーク、それより前のバージョンでは「AA」マークや「ぁあ」マークが表示されているはずです。
すると、メニューが出てくるので、その中から「…」(3つの点)をタップします。さらにメニューが開くので、「デスクトップ用Webサイトを表示」を選択してください。
これだけで、iPhoneの画面にPC版のWebサイトが表示されるようになります。
元のスマホ版に戻したい場合も同じ手順で、今度は「モバイル用Webサイトを表示」を選ぶだけでOKです。
ちなみに、Safariはあなたの選択を記憶してくれるため、次に同じサイトを訪れた時には自動的に選んだ表示方法で開いてくれますよ。
特定のサイトをいつもPC表示にする設定
「このサイトはいつもPC版で見たい」という場合は、個別に設定することもできます。
Safariでそのサイトを開いた状態で、アドレスバーの「ぁあ」マークをタップし、「…」→「デスクトップ用Webサイトを表示」の順に進みます。表示されたメニューで「デスクトップ用Webサイトを表示」の横にあるスイッチをオンにしましょう。
これで、そのサイトは今後ずっとPC表示で開くようになります。
さらに、すべてのサイトで常にPC表示にしたい場合は、設定アプリから変更可能です。「設定」→「アプリ」→「Safari」→「デスクトップ用Webサイトを表示」と進み、「すべてのWebサイト」または「ほかのWebサイト」のスイッチをオンにすればOKです。
MacでスマホやiPadの表示を確認する方法
Web制作をしている人や、自分のサイトがスマホでどう見えるか確認したい人には、Macの機能が役立ちます。
まず、Safariで「開発」メニューを有効にする必要があります。Safariを開いたら、メニューバーの「Safari」→「設定」(または「環境設定」)をクリックしましょう。
「詳細」タブを選び、一番下にある「メニューバーに”開発”メニューを表示」にチェックを入れてください。
すると、メニューバーに新しく「開発」という項目が追加されます。ここから「レスポンシブ・デザイン・モードにする」を選ぶと、画面上部にiPhoneやiPadなど、さまざまなデバイスのボタンが表示されるんです。
「iPhone 15」や「iPad Pro」などのボタンをクリックすると、そのデバイスで見た時と同じようにWebサイトが表示されます。横幅×縦幅を数値で指定することもできるため、特定の画面サイズでの表示も確認できますよ。
この機能を使えば、Macから手軽にスマホ表示をチェックできるので、Web制作の効率が大幅にアップするでしょう。
Macでより正確なスマホ表示を確認したい場合
レスポンシブ・デザイン・モードでも十分ですが、さらに正確にiPhoneやiPadでの表示を確認したい場合は、「iOS Simulator」という機能を使うこともできます。
ただし、これにはXcodeという開発ツールをインストールする必要があるため、本格的にWeb開発をしている人向けの方法と言えるでしょう。
Xcodeをインストール後、Safariの「開発」メニューから「シミュレータで開く」を選ぶと、実際のiPhoneやiPadとほぼ同じ環境でWebサイトの表示を確認できます。
iPadでの使い方のポイント
iPadは画面が大きいため、標準ではPC版が表示されることも多いです。
もしモバイル版を見たい場合は、iPhoneと同じように「ぁあ」マーク→「…」→「モバイル用Webサイトを表示」の順に選択します。
iPadの場合、「デスクトップ用Webサイトを表示」のオプションが、リロードボタンを長押しした時に表示されるメニューに直接出てくることもあるため、確認してみてください。
表示が切り替わらない時の対処法
「デスクトップ用Webサイトを表示」を選んだのに、なぜかモバイル版のままという経験はありませんか?
実は、すべてのWebサイトで表示の切り替えができるわけではありません。サイトによっては、モバイル版しか用意していなかったり、逆にPC版しかなかったりすることがあるんです。
また、一部のサイトでは、ユーザーのリクエストよりもサイト側の設定が優先されるため、切り替えが効かないこともあります。
表示が変わらない時は、以下の方法を試してみましょう。
まず、ページを再読み込みしてください。「Command + R」(Mac)でリロードすると、正しく表示されることがあります。
それでもダメな場合は、一度Safariを完全に終了させてから、もう一度開いてみるのも効果的です。iPhoneでは、画面下から上にスワイプしてアプリスイッチャーを表示し、Safariを上にフリックして終了させましょう。
特定のサイトだけ問題がある場合は、そのサイトの仕様である可能性が高いです。
レスポンシブWebデザインについて知っておこう
最近のWebサイトの多くは「レスポンシブWebデザイン」という手法で作られています。
これは、画面サイズに応じて自動的にレイアウトが変わる仕組みのことです。モバイル版とPC版が別々に存在するのではなく、1つのサイトが画面の大きさに合わせて表示を変えるんですね。
このタイプのサイトでは、「デスクトップ用Webサイトを表示」を選んでも、見た目があまり変わらないことがあります。これは不具合ではなく、サイトが正しく動いている証拠なんですよ。
Web制作者が知っておきたい活用法
Web制作に携わっている人にとって、MacのSafariでスマホ表示を確認できる機能は非常に便利です。
HTMLファイルを編集するたびに、実際のiPhoneで確認するのは時間がかかりますよね。レスポンシブ・デザイン・モードを使えば、その場で素早くチェックできます。
複数のデバイスサイズで表示を確認することで、どの画面でも快適に閲覧できるサイトが作れるでしょう。
また、開発メニューには「Web Inspector」という機能もあり、HTMLやCSSのコードを直接確認したり、問題を探したりすることもできます。
ただし、最終的には実機での確認も忘れずに行うことをおすすめします。シミュレーターでは完璧に見えても、実際のiPhoneでは違って見えることもあるからです。
ユーザーエージェントって何?
Macでスマホ表示に切り替える時、内部では「ユーザーエージェント」という情報が変更されています。
ユーザーエージェントとは、「どのブラウザ・デバイスからアクセスしているか」をWebサイトに伝える情報のことです。
Safariがこの情報を変更することで、Webサイト側が「あ、iPhoneからのアクセスだな」と判断し、モバイル版を表示してくれる仕組みなんですよ。
開発メニューから「ユーザーエージェント」を選ぶと、Safari以外のブラウザや、さまざまなデバイスのエージェントに変更することもできます。
よくある疑問Q&A
Q: PC表示にするとデータ通信量は増えますか?
A: はい、一般的に増えます。PC版は高解像度の画像や、より多くのコンテンツを読み込むため、データ通信量が多くなる傾向にあります。Wi-Fi環境での利用がおすすめです。
Q: すべてのサイトでモバイル表示とPC表示の両方がありますか?
A: いいえ、すべてのサイトにあるわけではありません。モバイル版のみ、PC版のみのサイトも存在します。また、レスポンシブデザインのサイトでは、明確な区別がない場合もあります。
Q: 設定した表示方法はいつまで有効ですか?
A: Safariはサイトごとに表示設定を記憶しますが、Safariのデータを削除したり、設定をリセットしたりすると元に戻ります。
Q: MacのSafariでスマホ表示にすると、本当にiPhoneと同じ表示になりますか?
A: レスポンシブ・デザイン・モードは近い表示を再現しますが、完全に同じとは限りません。より正確な確認には実機テストをおすすめします。
まとめ
Safariのスマホ表示とPC表示の切り替えは、意外と簡単にできることがわかりましたね。
iPhoneやiPadでは、アドレスバーのメニューから数タップで切り替えられますし、Macでは開発メニューを使えば、さまざまなデバイスでの表示を確認できます。
Web制作をしている人だけでなく、一般のユーザーにとっても便利な機能です。スマホ版では見にくいサイトがあったら、PC表示に切り替えてみましょう。逆にMacで作業中に「これってスマホでどう見えるかな?」と気になったら、レスポンシブ・デザイン・モードを試してみてください。
状況に応じて表示を切り替えることで、より快適にWebブラウジングが楽しめるはずですよ。
特定のサイトを常にPC表示にしたい場合は、設定で個別に指定できることも覚えておくと便利でしょう。
ぜひこれらの機能を活用して、Safariをもっと使いこなしてみてくださいね!
コメント