【MacOS Mojave】の safariで toggle device mode に近い画面を表示する方法。

みなさん、こんにちは。こんばんは。おはようございます。

MacOS Mojaveを使い始めて一年に満たないくま🐻です。

今回はブラウザのGoogle Chromeで開発ツールを表示後、toggle device modeで様々なデバイスでどのように見えるか確認するのをSafariで行う場合、どうすれば良いのかを書いていこうと思う。

まず、「Google Chromeの開発ツールとか toggle device mode って何やねん？」という人に向けて。。。

右クリックを使うことの多いWindowsとあまり使わないMac OSでは、操作手順で若干違うことが度々ある。

Windowsの場合、Google Chromeを起動後、右クリックし、「要素を検証」の欄をクリックすれば、開発ツールが表示される。（または、F12 キーを押す。）

（Windowsの開発ツールについてはざっくりした説明になってしまいましたが、自分が今メインで使っているのは、Mac OSなのでWindowsの表示画面についてはこの辺で割愛させてくだぱい。。。）

一方、Mac OSのGoogle Chromeで開発ツールを開く方法についてであるが、右クリックやF12 を押しても初期設定のままでは開発ツールが表示されない。どうすれば良いのかというと、Macの場合はCommand＋Option＋Iキーを同時に押すことによって表示される。

そして、下の画像の矢印で示したところが所謂 toggle device modeを開くためのボタンだ。

最初の質問に回答すると、toggle device modeとは様々なデバイス（iPhoneとかiPadとかGALAXYとか）でどのように表示されるかが分かるよ〜ってことだ。

しかし、Google Chromeには　toggle device mode ボタンがついているが、Safariにはついていない。。。

そこで、どうすれば良いかというと、実はかなり単純だった。

予め、準備として、環境設定を開き、詳細パネルの「メニューバーに”開発”メニューを表示」をチェックしておく。

それができたら、開発 > レスポンシブ・デザイン・モードにするを選ぶと、端末を選ぶ画面になるのだ。

これにも実はショートカットがあって、control+command+R キーを同時に押せば可能となる。

簡単なことを長々と書いてしまったが以上だ。。。

ではまた。。。