Firefox ブラウザで簡単にモバイル表示を確認する方法

携帯電話で風車を撮影している

こんにちは。
ブログ編集にあたり、手軽にスマホ・モバイル表示を確認する方法を
探してみました。
使用しているFirefoxブラウザはVer.52です。

スポンサーリンク

ユーザーエージェント

あまり聞き慣れない言葉ですが、
簡単に言えば Web 訪問者がどんな環境からアクセスしているのかを知るための情報の事です。

この情報を Firefox アドオン「User Agent Switcher」を使うことによって
他の Web ブラウザや OS で Web ページを閲覧した時、どのように表示されるのかを
確認する事ができます。

User Agent Switcher

User Agent Switcher は Firefox ブラウザに対応するフリーソフトです。
参考手軽に「Firefox」のUserAgentを変更できる拡張機能「User-Agent Switcher」

インストール

こちらのサイトにアクセスします。
Add-ons User Agent Switcher

Firefoxへ追加」ボタンをクリックします。

サイト「Add-ons」User-Agent-Switcherのページ 

インストール」→「今すぐ再起動」をクリックします。

インストールが完了したら、
画面右上のツールバー部分で右クリックし、「カスタマイズ」を選択します。

ツールバープルダウンメニューからカスタマイズにチェック

追加のツールと機能画面に切り替わったら、
ダウンロードしたアドオンをドラッグ&ドロップして
メニューに挿入します。

アドオンをメニューにドラッグ&ドロップ
または、アドオン上で右クリックし「ツールバーに追加」や「メニューに追加」を
選択します。

カスタマイズ終了」をクリックしたら
プルダウンメニュー一覧(もしくはツールバー)に User Agent Switcher が追加されます。

設定

デフォルトのままだと、InernetExplorer は6、7、8
iPhone は3.0での表示にのみ対応しています。
最近のブラウザや OS には対応しておりません。

そこで xml ファイルというものをインポートすることで、
対応するユーザーエージェントを増やすことができます。

xml ファイル

インポートする xml ファイルはこちらからダウンロードします。
firefox/useragentswitcher.xml

ページ内「Raw」ボタンをクリックします。
useragentswitcher.xmlページ「Raw」ボタンにチェック

コードが表示されます。
ページ上で右クリック→「名前を付けてページを保存」をクリックします。

ファイル名は適当なもので構いませんが、
保存の際に拡張子「.xml」と入力してから保存してください。
.xmlと拡張子を入力して保存

メニュー(またはツールバー)から User Agent Switcher をクリックし、
Edit User Agents」を選択します。
Edit-User-Agentsを選択

User Agent Switcher Opthions 画面内「Import」ボタンをクリックします。

「Import」ボタンにチェック

先ほど保存したファイルを呼び出し「OK」ボタンをクリックします。
ユーザーエージェントが増えたのを確認したら完了です。

使い方

User Agent Switcher をクリックし、表示させたいユーザーエージェントを選択します。
例)iPhone( safari / iOS9.3.1 )
iPhone-safari-iOS9.3.1を選択

キーボードのF5キーを押して画面を更新します。

これでiPhone( safari / iOS9.3.1 )からアクセスしていることになりました。

Yahoo!検索画面トップ

画面幅の調節

画面幅もモバイル表示に変えたいので、

  • ブラウザ画面上で右クリック→「要素を調査」
  • 右上ツールバー、プルダウンメニューから「開発ツール」
  • キーボードのF12キーを押す
  • いずれかの方法で開発ツールを開きます。

開発ツール画面上部分、「レスポンシブデザインモード」をクリックします。

レスポンシブデザインモードをクリック

画面サイズを変えるには、プルダウンメニュー▼をクリックして調節します。

またはウィンドウのサイズ変更グリフをドラッグし、
正確に調整します。
320×480ピクセルの画面を表示している

iPhone 6 で 375×667 ピクセル
iPad なら 768×1024 ピクセルになります。
参照iPhone/iPad解像度(画面サイズ)早見表

表示を戻す

PC表示に戻すにはメニューまたはツールバーの
User Agent Switcher →「Default User Agent」をクリックして
アドオンを無効にし、F5キーで更新すると元に戻ります。

おわりに

User Agent Switcher を導入したことで、
スマホ画面をブラウザ上で確認しながら快適に作業ができるようになりました。

ご覧頂き、ありがとうございました。

スポンサーリンク
レクタングル大




レクタングル大




シェアする

フォローする