PCブラウザでスマホチェック

Mobile

スマートフォン用ページの制作工程として
・まず「PC上でコーディング」してから
・表示を「実機スマートフォン」で確認する
という流れがあります。

制作途中でちょっと表示を確かめたい・調整したいときなど、PCと実機スマホを何度も往復していては時間がかかってしまいます。

作業中はPCブラウザの幅を縮めたり、何かしらのツールを使って、PC上でスマホ画面に近い環境を作って表示をチェックしているのではないでしょうか。

今回はPCブラウザでお手軽にスマホページを表示する方法を紹介します。

主要ブラウザをリストアップしました。

Firefox
Google Chrome
Safari
Internet Explorer
Opera

それぞれ自分の使いやすいブラウザや開発ツールがあると思いますので
各ブラウザでの方法をまとめます。

【UA（ユーザーエージェント）の変更】
【ブラウザ幅・サイズの変更】

この設定をすることでスマホに近い環境をPCに再現できます。

PCからスマホページのURLにアクセスすると、リダイレクト設定などの自動振り分けによって、
勝手にPCページに転送されてしまい、そもそもスマホ用のページを見れない場合があります。

これはブラウザのUA設定を変更することによって解決できます。

● Firefox

アドオンでUAを切り替えることができるようになります。 ・Fire Mobile Simulator Mobile 用でも使われている有名なアドオンです。 Firefox がバージョンアップしてから対応していない場合もあるらしいです。使えると便利です。 ・User Agent Switcher ブラウザメニューのツールからUAの変更ができるようになります。初期設定で使える端末は iPhon 3.0 となっていて、追加もできます。設定が少し大変そうです。画面サイズの切り替えにも様々なアドオンがあります。 ・Browsizer 320 × 480 など好きなサイズを登録することができ、メニューバーに表示させると、右クリックで選択してブラウザの画面サイズを切り替えることができます。現在の画面サイズも表示されますので手動で画面幅を変えてもサイズがわかります。

●Google Chrome

ブラウザの機能で、F12キーを押すと「 Chrome Developer Tools 」が起動します。画面右下の歯車のマーク「 Settings 」ボタンをクリックすると設定メニューが開きます。「 Network 」項目の「 Override User Agent 」にチェックを入れて、プルダウンのメニューからUAを選択できます。「 iPhone－iOS5 」等を選択したあと、ページを再読み込みするとスマホUAに切り替わった画面が表示されます。画面サイズの変更には Chrome ウェブストアの拡張機能（アドオン）が使えます。 ・Window Resizer 好きなサイズを登録することができ、アイコンクリックでサイズ変更ができるようになります。手動で幅を動かしたとき、右下に現在のウィンドウサイズも表示されます。

●Safari

ブラウザの機能でUA切り替えができます。まずは開発メニューを表示させるために、ブラウザ右上の歯車マークから「設定」を開き、「詳細」の項目から「メニューバーに開発メニューを表示」にチェックをいれます。次に歯車マークの隣にあるメニューボタンから「開発」を選ぶと、「ユーザエージェント」という項目があるので、選択して切り替えることができます。 Safari はブラウザの最小幅が 320px なので、手動で横幅を一番小さくすると iPhone の幅と同じになります。

●Internet Explorer

Internet Explorer 9 のブラウザの機能で「F12開発者ツール」を使います。F12キーを押すと起動します。開発者ツールのメニューバーから「ツール」を選択。「ユーザーエージェント文字列の変更」→「カスタム」でスマホ用のUA文字列を登録します。例）iOS 5 のUA文字列は以下になります。

Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3

登録したUA選択後、ページの再読み込みでスマホページが確認できるようになります。

●Opera

ブラウザの機能を使います。左上メニューから「ページ」→「開発者用ツール」→「 Opera Dragonfly 」を起動します。 Opera Dragonfly のツールバーから「ネットワーク」を選択。「ネットワークオプション」→「ヘッダを全体的に上書きする」にチェックを入れます。「プリセット」のプルダウンからUAを切り替えて「保存」をクリックします。