Chromeのデベロッパーツールでスマホを機種を追加する方法です。
完成イメージ
具体的には、上記の画像のようにデフォルトであるスマホ機種以外の、スマホ機種を追加することが出来ます。
他の機種を追加することで、実機がなくてもCSSのスタイルなど細かい確認ができるようになり、デザインの崩れなどを事前に防げるようになります。
3つの手順を図解で解説していて、簡単にできるので是非実装してみてください！
スポンサーリンク
1.デベロッパーツールを開いてスマホ表示にする
まずはじめに、「右クリック→検証」でGoogleデベロッパーツールを開いてください。
次にスマホのアイコンをクリックして、スマホ表示にしてください。
そしたら、機種選択の画面にいきます。
上記の画像のようにクリックすればOKです。
スポンサーリンク
2.Editを押してスマホを追加する設定をする
次に、上記の画像のようにEditをクリックして機種追加画面にいきます。
そしたら、下記のような画面がでてくるので、Add custom deviceをクリックしてください。
スポンサーリンク
3.サイズと機種名を入力して、追加する
最後に、Device Nameに追加したい機種名を入力して、機種のサイズを入力すれば完了です。
一応サイズ例として、iPhone12のサイズ表を記載しておきます。
iPhone12のサイズ表
iPhone12,12Pro
390×884
iPhone12mini
375×667
iPhone12ProMax
428×926
※それぞれ横×縦です。
お疲れさまでした！
これで、機種追加は完了です！
後は先程の手順で、自分が追加したい機種を追加していきましょう。
今回は以上です。
参考になれば幸いです。
最後までみてくださり、ありがとうございました。