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

こんにちは、ゆうが（@yuuuugablog）です。

今回は、Chromeのデベロッパーツールでスマホ機種を追加する方法を紹介してきいきます。

完成イメージ

デフォルトであるスマホ以外の、スマホ機種を追加することが出来ます。たとえば、iPhone12など。

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

ゆうが

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

本記事のもくじ

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

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

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

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

エンジニアの方ならわかると思いますが、スマホ表示で確認したいときみたくやればOKです。

つぎに、画像のように「Edit」をクリックして機種追加画面にいきます。

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

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

MEMO

機種名はわかりやすくしておくと便利です。

またサイズ例として、iPhone12のサイズ表を記載しておきます。
※それぞれ横×縦です。

iPhone12,12Pro

390×884

iPhone12mini

375×667

iPhone12ProMax

428×926

ゆうが

先程の手順通りにやれば、自分が追加したい機種を無限に追加できます。

それでは今回は以上です！
記事が参考になりましたら、シェアしていただけると大変励みになります。

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