【WordPress】モバイルの表示確認はChromeの「デベロッパーツール」「デバイスモード」があれば実機がいらない件。ショートカットで一発でイケちゃう

こんにちは。部長ナビ(@nabi_1080)です

最近、メッチャカスタマイズしまくっている僕ですけど、どうしても一つだけ問題がありまして、それが「iPhone 6」の表示テストでした

あやかぜは仕事で帰りが遅く、休日も忙しいため、なかなかiPhoneを借りて、4.7インチのテストをすることが出来ませんでした

子供達のゲーム機として持たせている4インチiPhoneも、じぃじの家に行くと、表示テストができず、それをg.O.R.iさんに話したら、「え?」って言われて、リンクが送られてきました

スポンサーリンク

Chromeのデベロッパーツール・デバイスモードが最強!

gori.meにあった、デベロッパーツールの記事を見て、早速やってみました

やり方は簡単「Command+Option+i」

表示させたいページを開いて、ショートカットキーを押します。あー、そうそう。Macね、コレ。

上の方でデバイスを選べる

4インチiPhone

スクリーンショット 2016-08-22 18.40.44

一番上に「iPhone 5」ってありますけど、コレが4インチiPhoneの画面です。Chrome上にコレが表示され、4インチiPhoneだとこうなるよってのがわかります

これと、ForkLiftを駆使してコードをちょっとずつ変えて様子を見る感じですね

4.7インチiPhone

スクリーンショット 2016-08-22 18.42.57

次は4.7インチ。ユーザー数の多いこの機種の表示は必須ですね

ちなみに僕は条件分岐で3つの大きさのiPhone全てで表示を変えてます

5.5インチiPhone

スクリーンショット 2016-08-22 18.45.19

5.5インチはiPhone 6s Plusがあるので、テストいらないんですけど、パソコン上で見れるってのが大きいんですよ

コードもパソコンでやりますから、ChromeとForkLift、そして、CotEditorを並べて作業してます

こういう時は、やっぱりMacBook Pro 15インチじゃないと作業になりませんね。15インチ最高!

まとめ

マジでデバイスモード最強なので、使ってみてください

もし、デバイスモードにした時、パソコン表示のままだったらですね、お気に入りに登録してあるだろう自分のサイトのリンクを押してみて下さい

すると、モバイル表示に切り替わりますので、大丈夫です

今はモバイルファーストの時代で、モバイル表示(特に、予想外の表示になることが多い4インチ)は確認必須です

このモードをガンガン使ってガシガシ更新していきましょう!Chromeって(・∀・)イイネ!!

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

この記事の関連カテゴリ

サイト内検索