safariのレスポンシブ・デザイン・モードを活用する

はじめに

フロントの開発をしていると、iOSのsafariの表示が確認したい時があります。
普段はiOS端末を用意して表示確認してたんですが、簡単な表示であればmacのsafariから挙動を確認できるみたいです。
(普段chromeしか使ってないから知らなかった。。。)

設定

safariのツールバーに開発メニューを表示させる

ツールバーから、safari→開発環境...→詳細 を選択し メニューバーに"開発"メニューを表示 にチェックを入れる

レスポンシブ・デザイン・モードの起動

ツールバーから開発を選択し、レスポンシブ・デザイン・モードにする を選択

レスポンシブ・デザイン・モードでできること

端末のシミュレート

iPhone SE や iPhone 8 だけでなく iPad,iPad Pro のインチ違いも選択できます。

端末のアイコンをもう一度クリックすることで横画面表示も確認できます。

ブラウザのシミュレート

右上の選択肢を開くとSafariの表示だけではなく、MicrosoftEdge,Google Chrome, Firefoxが選択できます。

しかもChromeとFirefoxに関してはmacOSとWindowsまで選択できます。

Windows

macOS

iOSバージョンのシミュレート

同じく右上の選択肢からiOSのバージョンも指定できます。

Retinaディスプレイのシミュレート

上部真ん中の選択肢でRetinaディスプレイのシミュレートができます。

Retinaディスプレイについてはこちらの記事が参考になりましたが、1ドットあたりのピクセル数をシミュレートできるようです。

1x

3x

おわりに

今回のもそうだけど、ブラウザの開発ツール知らなすぎて時間無駄にしてる気がする。。。