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

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

こんにちは、ゆうが(@yuuuugablog)です。

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

完成イメージ

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

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

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

ゆうが

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

スポンサーリンク

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

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

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

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

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

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

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

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

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

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

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

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

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

スポンサーリンク

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

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

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

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

iPhone12のサイズ表

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

iPhone12,12Pro

390×884

iPhone12mini

375×667

iPhone12ProMax

428×926

ゆうが

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

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

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

合わせて読みたいプログラミングのこと

【iPhone 12 ProMaxまで対応】レスポンシブデザインのブレイクポイントのテンプレ【iPhone 13 ProMaxまで対応】レスポンシブデザインのブレイクポイントのテンプレ【完全無料】BoostNoteの特徴や使い方を解説【完全無料】BoostNoteの特徴や使い方を解説bootstrap5と4の変更点を解説【脱jQuery】Bootstrap5と4の変更点を簡単に解説