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

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

Chromeを使う人が多い昨今ですが、
デフォルトブラウザがゆえSafariを愛用しているユーザも一定数いて、
特にiPhoneユーザのほとんどの人がSafariを使っている印象です。

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

本当であれば実機で動作チェックすればベストですが、そういう訳にもいかないのでこういったスマホシミュレーターを利用します。

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

MacのSafariでスマホのページを表示させる方法

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

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

ショートカットキーは、control ⌃＋⌘command＋R

画面が切り替わるので、適当な機種を選択します。

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

流石Apple様。自社製品しか用意していないです（汗）
でも何故かiPhoneXとかは用意されていません…。（2019.3.1現在）

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

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

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

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

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

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

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

control ⌃＋⌘command＋R

他ブラウザでは？

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

Safariでは、「レスポンシブ・デザイン・モード」と称しているものは、
Chromeでは、「デベロッパーツール」、Firefoxでは「開発ツール」と呼ばれています。
（いずれもoption ⌥＋⌘command＋Iで起動します。）

WindowsのIEでもEdgeも同様の機能を持っています。

まとめ

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

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