WordPressのテーマがモバイルでどのように表示されるのかをPCのブラウザで確認する方法

WordPressのテーマを修正したとき、iPhoneなどのスマートフォン、モバイルで正しく表示されるのか。
これをPC（ここではWindowsとMac両方）のブラウザで確認するには、viewportとUserAgentの二つを変更する必要があります。
モバイル用にWordPressテーマを作成中で、そのテーマをPCで動作確認したい。
こんな方は是非、ご覧下さい。

本文を読む前に
1. viewport（ビューポート）とは
2. UserAgent（ユーザーエージェント）とは
vewportだけ変えてもモバイルと同じにはならない
UserAgentだけでもダメ
viewportとUserAgentを合わせて変更すればOK
まとめ

本文を読む前に

いきなり専門用語で始めてしまいました。
まずはこちらを確認して下さい。

viewport
UserAgent

viewport（ビューポート）とは

HTML5のmetaタグの一種です。
デバイスの画面サイズに関連することを設定できます。
具体的には幅、高さはもちろん、ズームに関するあれこれ。
詳しくはこちらをご覧下さい。

HTML5/ページ全般/meta要素表示領域を設定する – TAG index Webサイト

UserAgent（ユーザーエージェント）とは

Webサイトにアクセスする際に自分が何者であるかを示すもので、HTTPヘッダーに含まれています。
例えば、SafariやChromeといったブラウザやiPhone、Androidなどのモバイルデバイスなどがあります。
（本当はもっと細かい記述です。）
詳しくはこちらをご覧下さい。

ユーザーエージェントとは – IT用語辞典 Weblio辞書

vewportだけ変えてもモバイルと同じにはならない

モバイルと同じ表示にするため、まず試したのはviewportの変更。
viewportを簡単に変更するものに「ViewPort Resizer」というブックマークレットがあります。

Responsive design testing tool — Viewport Resizer — Emulate various screen resolutions – Best developer device testing toolbar

早速、試してみましたが失敗しました。
viewportを変えてもモバイルと同じにはならないのです。
このブログのテーマはTwentyTwelveの子テーマです。
TwentyTwelveはレスポンシブなので、モバイルで表示したときには1カラムになるはず。
しかし、2カラムのまま。
viewportを変えるだけではダメなことが判明しました。

UserAgentだけでもダメ

次に試したのがUserAgentの変更。
Google様のいいなりです。
こちらはブラウザの機能で変更します。

Safariなら、ツールバーの「開発→ユーザーエージェント」から。

Chromeならば「ツール→デベロッパーツール」のSettingsをクリック。
表示されたサブウインドウの左端のメニューからOverridesをクリック。
そこにあるUser Agentにチェックを付けてリストから選択します。

FireFoxはユーザーエージェントの変更ができない…
アドオンがあるようですが、僕の環境では動きませんでした。

IEは… 試してませんm(_ _)m

viewportとUserAgentを合わせて変更すればOK

では、viewportとUserAgentを同時に変更したらどうなるか。
はい、これが正解でした。
viewportで画面サイズの変更。
UserAgentでiPhoneを選択。
これでiPhoneからアクセスしたときと同じ表示になります。
このブログのテーマもちゃんと1カラムになることも確認できました。

ちなみに、ChromeとFireFoxはViewPort Resizerを使わなくてもviewportを変更できます。
ChromeならUser Agentを設定した個所の下にDevice metricsという個所があります。
そこにチェックをつけてから、幅と高さの値を入力すればOKです。

FireFoxはツール→Web開発→レスポンシブデザインビューとクリックしていくとサイズを設定する画面になります。