ブラウザ

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様。自社製品しか用意していないです(汗)
でも何故かiPhoneXとかは用意されていません…。(2019.3.1現在)

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

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

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

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

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

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

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

control⌘commandR

他ブラウザでは?

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

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

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

まとめ

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

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

関連記事

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です