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

投稿日:2013年8月9日

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

本文を読む前に

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

  • 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開発→レスポンシブデザインビューとクリックしていくとサイズを設定する画面になります。

まとめ

PCのブラウザでモバイルテーマの確認をするには

  • viewport
  • UserAgent

この2つを合わせて変更する必要があります。

Chromeならブラウザの設定だけで可能。
Safariならブラウザの設定とViewport Resizerを組み合わせれば可能。

テーマを修正したとき、モバイルでどのように表示されるか気になる方は、この方法を試してみて下さい。
それでは。

Posted from するぷろ for iPhone.

するぷろ for iOS(ブログエディタ) 2.100(¥450)
カテゴリ: ソーシャルネットワーキング, 仕事効率化
販売元: Gachatech – isshin(サイズ: 1.6 MB)
全てのバージョンの評価: (56件の評価)
+ iPhone/iPadの両方に対応

シェアして頂けたら感涙にむせびます

Rondoをまた読みたいなと思ってくれたら

是非、定期購読を!