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

記事内に商品プロモーションが含まれる場合がございます。本サイトはステマ規制への対応をしてます。

こんにちは、ゆうが（@yuuuugablog）です。
今回は、Chromeのデベロッパーツールでスマホ機種を追加する方法を紹介してきいきます。

完成イメージ

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

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

本記事のもくじ

この記事を書いた人

滝田裕雅

ゆうがブログ運営者・ブロガー

「正しい知識を正しく届ける。」を理念にサイトを運営しています。その分野の専門家の記事や論文、私の実体験をもとに情報に誤りのない記事を作成しています。プロフィールの詳細＆記事編集ポリシーはこちら

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

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

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

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

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

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

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

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

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

iPhone12,12Pro

390×884

iPhone12mini

375×667

iPhone12ProMax

428×926