【簡単】Chromeのデベロッパーツールでスマホ機種を追加する方法

いろいろなスマホ

Chromeのデベロッパーツールでスマホを機種を追加する方法です。

完成イメージ

Google DeveloperTool

具体的には、上記の画像のようにデフォルトであるスマホ機種以外の、スマホ機種を追加することが出来ます。

他の機種を追加することで、実機がなくてもCSSのスタイルなど細かい確認ができるようになり、デザインの崩れなどを事前に防げるようになります。

3つの手順を図解で解説していて、簡単にできるので是非実装してみてください!

スポンサーリンク

1.デベロッパーツールを開いてスマホ表示にする

まずはじめに、「右クリック→検証」でGoogleデベロッパーツールを開いてください。

次にスマホのアイコンをクリックして、スマホ表示にしてください。

GoogleDeveloperTool

そしたら、機種選択の画面にいきます。

GoogleDeveloperTool

上記の画像のようにクリックすればOKです。

スポンサーリンク

2.Editを押してスマホを追加する設定をする

GoogleDeveloperTool

次に、上記の画像のようにEditをクリックして機種追加画面にいきます。

そしたら、下記のような画面がでてくるので、Add custom deviceをクリックしてください。

GoogleDeveloperTool

スポンサーリンク

3.サイズと機種名を入力して、追加する

最後に、Device Nameに追加したい機種名を入力して、機種のサイズを入力すれば完了です。

GoogleDeveloperTool

一応サイズ例として、iPhone12のサイズ表を記載しておきます。

iPhone12のサイズ表

iPhone12,12Pro

390×884

iPhone12mini

375×667

iPhone12ProMax

428×926

※それぞれ横×縦です。

お疲れさまでした!
これで、機種追加は完了です!

後は先程の手順で、自分が追加したい機種を追加していきましょう。

今回は以上です。
参考になれば幸いです。

最後までみてくださり、ありがとうございました。