WordPressのテーマを修正したとき、iPhoneなどのスマートフォン、モバイルで正しく表示されるのか。
これをPC(ここではWindowsとMac両方)のブラウザで確認するには、viewportとUserAgentの二つを変更する必要があります。
モバイル用にWordPressテーマを作成中で、そのテーマをPCで動作確認したい。
こんな方は是非、ご覧下さい。
本文を読む前に
いきなり専門用語で始めてしまいました。
まずはこちらを確認して下さい。
- viewport
- UserAgent
viewport(ビューポート)とは
HTML5のmetaタグの一種です。
デバイスの画面サイズに関連することを設定できます。
具体的には幅、高さはもちろん、ズームに関するあれこれ。
詳しくはこちらをご覧下さい。
UserAgent(ユーザーエージェント)とは
Webサイトにアクセスする際に自分が何者であるかを示すもので、HTTPヘッダーに含まれています。
例えば、SafariやChromeといったブラウザやiPhone、Androidなどのモバイルデバイスなどがあります。
(本当はもっと細かい記述です。)
詳しくはこちらをご覧下さい。
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を組み合わせれば可能。
テーマを修正したとき、モバイルでどのように表示されるか気になる方は、この方法を試してみて下さい。
それでは。
するぷろ for iOS(ブログエディタ) 2.100(¥450)
カテゴリ: ソーシャルネットワーキング, 仕事効率化
販売元: Gachatech – isshin(サイズ: 1.6 MB)
全てのバージョンの評価: (56件の評価)
iPhone/iPadの両方に対応
コメント