![](https://mac.webmist.info/wp-content/uploads/2022/09/safasp.jpg)
mac のSafari でウェブサイトのスマートフォン(iPhone)表示を確認する方法を解説します。
ウェブサイトを制作する立場だと、スマートフォンで正しく見られるかどうか確認する必要があります。スマートフォンの実機で確認するのが確実ですが、それも手間でしょう。
mac の Safari を使ってスマートフォン表示を確認する事ができます。
開発メニューを表示
ウェブサイトのスマートフォン表示を確認する為に、まずは開発メニューを有効化する必要があります。
![環境設定](https://mac.webmist.info/wp-content/uploads/2022/09/safadl.jpg)
Safari メニューより「環境設定」を開きます。場合によっては「設定」と表示されている事もあります。
![](https://mac.webmist.info/wp-content/uploads/2022/09/safajava4.jpg)
詳細タブを開きます。
![](https://mac.webmist.info/wp-content/uploads/2022/09/safajava5.jpg)
「メニューバーに“開発”メニューを表示」のチェックボックスをオン✅にします。
- オン✅:メニューバーに開発メニューを表示
- オフ:メニューバーに開発メニューを非表示
メニューバーに開発メニューが表示されます。
スマホ表示を確認する方法
![](https://mac.webmist.info/wp-content/uploads/2022/09/safasp2.png)
スマホ表示を確認したいウェブサイトを Safari で表示して、開発メニューから「レスポンシブ・デザイン・モードにする」を選択します。
![](https://mac.webmist.info/wp-content/uploads/2022/09/safasp3.png)
するとレスポンシブ・デザイン・モードが起動します。画面上部のデバイス一覧はボタンになっており、iPhone のボタンを押して見ましょう。
![](https://mac.webmist.info/wp-content/uploads/2022/09/safasp4.png)
このようにウェブサイトがスマホ表示になります。正しく表示されていない場合は、一旦「command ⌘ キー + R」でページをリロードしてみてください。
ショートカットキーで起動
以下のショートカットキーでレスポンシブ・デザイン・モードを起動と終了を切り替える事ができます。
Control + command ⌘ キー + R
レスポンシブ・デザイン・モードを終了するには?
![](https://mac.webmist.info/wp-content/uploads/2022/09/safasp5.png)
もう一度開発メニューを開いて「レスポンシブ・デザイン・モードを終了」を選択します。
もしくは「Control + command ⌘ キー + R」のショートカットキーでも終了できます。
Webサイトを作りながらその場で確認できるので便利だにゃ!