firefoxの幅が狭くできない!でもレスポンシブデザインビューで解決

公開日:2014年1月15日 

firefoxの幅が狭くできない!でもレスポンシブデザインビューで解決

Firefox Ver.26になってからかウィンドウの幅が424px以下にできなくなりました。通常の用途なら問題ないのですが、モバイルサイトのプレビューをする際に不便です。でも「レスポンシブデザインビュー」という便利な機能があるので問題は解決しました。


Firefox Ver.26からウィンドウ幅が424px以下にできなくなった

インストールしているアドオンによって、若干異なるらしいのですが、Firefox Ver.26になってからウィンドウ幅が424px以下にできなくなってしまいました。

通常の用途なら特に困ることはないと思うのですが、モバイルサイトのプレビューができないので、不憫な思いをされている方も多いのではないでしょうか?

私の場合、プレビューどころか、CODA(エディタ)よりもfirebugで書くことの方が多いくらいのハードユーザーです。なので、firebugが使えるfirefoxは、なおさら手放せません。
firebugは、webkit専用などのブラウザ固有のプロパティに気をつければ、最高な開発ツールです。

Chromeにもfirebugはあるので、それを使っていたのですが、リロードするとブラウザと分離したfirebugのウィンドウが、ブラウザの下部に戻ってしまったり、CSSを一時無効にしたいだけなのに消えてしまったり(Firefoxの場合半透明になるだけで、すぐに戻せる)するので、使い勝手が悪いです。

なんとかFirefoxのfirebugを使ってモバイル開発ができないものかと、ググりましたが、ブラウザハックみたいな情報しか出てこなくて困ってましたが、ブラウザの機能をいろいろ見てたら標準ですばらしい機能が付いてることに気が付きました。

レスポンシブデザインビュー

rdv1

「ツール」→「Web開発」→「レスポンシブデザインビュー」

これ、良いです。

Firefox Ver.25以前は、ブラウザの幅を320pxにしてFirebugを別窓で表示させて編集してましたが、このモードだとブラウザ下部に付けたまま編集ができます。好みの問題ですが、窓が2つの状態よりこっちの方が好きです。

rdv2

幅320pxのiPhoneサイズも幅768pxのiPadサイズもデフォルトで設定されていますし、枠の端をドラッグすれば変えられます。
(ちなみにiPhone5はデフォルトで設定されてませんが、縦を568pxにするだけでiPhone5の画面サイズになります。)

rdv-head

画面サイズの他に、縦横切替、タッチシミュレータ、キャプチャが使えるようです。

モバイル機器の画面サイズについては、Find job!さんに良いまとめがあるので参考にしてみてください。

いつも手元に置いておきたい!iPhone/Android画面解像度早見表【2011年〜2013年夏最新機種】

上記サイトでは、iPhone5の解像度が1136×640となってますが、Retinaディスプレイなので、レスポンシブデザインビューでは568×320にすればいいです。

ハックして修正することも可能らしい

前述の「ブラウザハックみたいな情報」について

私の場合、モバイル環境でどう見えるかの簡易プレビュー用途なので「レスポンシブデザインビュー」で事足りましたが、どうしてもブラウザのウィンドウ幅を狭くしたい方は、ハックして修正することもできるようです。

https://support.mozilla.org/en-US/questions/980033

英語なのでよくわかりませんが、この人は374px以下にならなかったけど、解決したようです。

ユーザーエージェントシミュレーター

ユーザーエージェントでPCとモバイルを切り替えているタイプのサイトでは、ウィンドウ幅だけ変えてもプレビューできません。

そんな時は、Firefoxのアドオン、User Agent Switcherがオススメです。

User Agent Switcher

ユーザーエージェントは自分で設定することもできますが、デフォルトで用意されている「iPhone3.0」と「Android Mobile」で十分です。

useragent

上画像は、当社のコーポレートサイトの会社概要ページです。このページはユーザーエージェントで切り替えるタイプで作成しました。コーポレートサイトを作ってる時にレスポンシブデザインビューがあれば、作業がもっと効率よくできたと思います。

話題のWordpressテーマ、STINGERのカスタマイズにも

User Agent Switcherとレスポンシブデザインビューを使えば、ユーザーエージェントで切り替えるタイプのテーマのカスタマイズも楽々です。

例えば、多くのブロガーに愛用されているWordpressテーマ「STINGER」もこのタイプだと思いますので、STINGERユーザーの方にもオススメの組み合わせです。

STINGER3 公式サイト


FirefoxとFirebugの組み合わせは最強の開発ツールだと思ってますので、どちらもいつまでも現役でいてほしいです。


コメントを残す