WordPressでWebサイトを制作していて、スマートフォン画面ではどうなるか?

実際のウィンドウ画面を小さくしたり、Chrome UA SpooferというChromeのアドオンツールで確認したり、実機で確認したりしていました。どうしていままで気づかなかったんだろう? と思ったくらい。スマートフォン端末のチェックは、Google Chromeのディベロッパーツールで、標準装備されていたんですね。

試しに、Bloggerでのサイト「100Excel」を、ディベロッパーツールで確認してみます。ディベロッパーツールの出し方は、Webページ上で右クリック→「検証」が早いかと思います。

developertool

ここを押せば、スマートフォン端末表示に切り替えることができたんですね。

developertool2

このとおり。様々な端末での表示も可能です。ちょっと感動しました。まだまだ勉強不足な管理人です。画面表示を元に戻す場合は、もう一度、画面を切り替えたスマートフォンアイコンをクリックしてください。

developertool4

これを知ってから、すくなくともChrome UA Spooferはいらないなと思い、削除しました。Web開発に必要なブラウザのディベロッパーツール、管理人と同じように知らなかった! という方は、是非確認してみてください。

なお、この記事のChromeのバージョンは、2016年8月15日現在の最新版となります。まあ、ここは新たな端末が出てこない限りは、ずっと残りそうなものですよね。