Safariでスマホページを確認する方法

MacのSafariでスマホページを確認する方法 設定/使い方
スポンサーリンク

MacやiPhoneでのデフォルトブラウザと言えばSafari。

Chromeを使う人が多い昨今ですが、デフォルトブラウザがゆえSafariを愛用しているユーザも一定数いて、特にiPhoneユーザは結構な割合でSafariを使っている印象です。

Webサイトを制作する側は、そんなSafariユーザの為に、デザインが崩れていないか。ちゃんと動作するかなどをシミュレートする必要があります。

本当であれば実機で動作チェックすればベストですが、いろいろ面倒なので、とりあえずはこういったスマホシミュレーターを利用します。

今回はMacのSafariでスマホのページを表示させる方法を解説します。

※シミュレーターと実機では実際は違う場合があります。

スポンサーリンク

MacのSafariでスマホのページをシミュレート表示させる方法

やり方は簡単で、Safariを起動させ「レスポンシブ・デザイン・モード」にすればOKです。

メニューバーの「開発」→「レスポンシブ・デザイン・モードにする」を選択します。

ショートカットキーでは、control ⌃⌘commandR

レスポンシブデザインモードの入り方

開発メニューが見当たらない?

メニューバーに「開発」がない場合は、

メニューバー「Safari」→「環境設定」の詳細タブから
「メニューバーに”開発”メニューを表示」のチェックボックスにチェックを入れます。

シミュレート機種を選択
画面が切り替わるので、適当な機種を選択します。

iPhone SE、iPhone 8、iPhone 8plus、iPad mini、iPad、iPad Pro…

流石Apple様。自社製品しか用意していないです(汗)
でも何故か新し目のiPhoneとかは用意されていません…。(2023.8.1現在)

シミュレートブラウザの選択
右上の選択メニューからブラウザを変更することもできます。

ブラウザ選択画面
iOSのSafari、Edge、IE、Firefoxなどが選べます。
ChromeとFirefoxはWindows版も選択可能。

IEを選べるのは嬉しいですが、本音言えばIEは世の中からなくなって欲しいです…。

※2023.8.1 追記
IEはお亡くなりになっていました。

レスポンシブ・デザイン・モードの終了方法

レスポンシブ・デザインモード(スマホモード)を終了させるには、起動時と同じで以下のようにします。

メニューバーの「開発」→「レスポンシブ・デザインモードを終了」

もしくはショートカットキーで起動時と同じ、

control ⌃⌘commandR

他ブラウザでは?

Chrome、Firefox、Edgeでも同じような機能が標準で装備されています。

Safariでは、「レスポンシブ・デザイン・モード」と称しているものは、
Chromeでは、「デベロッパーツール」、Firefoxでは「開発ツール」、Edgeでは「DevTools」と呼ばれています。

いずれもoption ⌥⌘commandIで起動します。

まとめ

一般ユーザはPC、スマホ共多種多様なブラウザを使用しているので、デベロッパー側の人間は、どのブラウザでも正常に表示、動作することをチェックが必須となります。

ただ、あまり昔のブラウザに気を使っていると、やりたいことがやりにくくなってくるので、特に要望がないのであれば、古いブラウザは見切りをつけてもいいのだと思います。

※ IEは完全に無視しても良いです。

コメント

  1. […] デベロッパーツールでスマホ画面にする方法は、【Google Chrome/Firefox】でPCからスマホの表示をかんたんに確認する方法!やSafariでスマホページを確認する方法にて解説されてます。 […]

タイトルとURLをコピーしました