IE6-8 is Not Supported

Firefox のレスポンシブデザインビューをカスタマイズする方法

今回は Firefox にあらかじめ入っているデベロッパーツール、レスポンシブデザインビューを少し使いやすくする方法をご紹介。

レスポンシブデザインビューは Media-Queries を利用したレスポンシブなサイトの動作確認に役立つので覚えておきましょう!
今回紹介するのは、プリセットを一括で編集する方法です。

1. レスポンシブデザインビューを起動

Windows なら Shift + Ctrl + M Mac なら Shift + Command+ M で起動。
すると、画面比を選択するプルダウンメニューが出てきます。

一度もプリセットを追加したことがない人のみ、適当な画面比でプルダウンを押しプリセットを追加を選択、適当な名前をつけて保存します。
こうすることで about:config の設定欄に devtools.responsiveUI.presets というものが追加されます。

2. about:config を起動

Firefox ユーザーにはおなじみの about:config の出番です。
ロケーションバー (URLバー) に about:config と打ち Enter キーを押します。
細心の注意を払って使用するを選択し、検索バーで devtools.responsiveUI.presets を検索。

3. レスポンシブデザインビューの値を操作

devtools.responsiveUI.presets の値の欄をダブルクリックすると値を変更できるので、 自分で設定するのが面倒な人は以下をコピペしてみてください。

[{“key”:”320×480″,”name”:”iPhone 4″,”width”:320,”height”:480},{“key”:”320×568″,”name”:”iPhone 5″,”width”:320,”height”:568},{“key”:”360×640″,”name”:”Galaxy S4″,”width”:360,”height”:640},{“key”:”533×853″,”name”:”Kindle Fire HD 7″,”width”:533,”height”:853},{“key”:”600×800″,”name”:”Kindle Fire”,”width”:600,”height”:800},{“key”:”600×1024″,”name”:”Galaxy Tab”,”width”:600,”height”:1024},{“key”:”603×966″,”name”:”Nexus 7″,”width”:603,”height”:966},{“key”:”768×1024″,”name”:”iPad”,”width”:768,”height”:1024},{“key”:”1280×800″,”name”:”MacBook Pro 13″,”width”:1280,”height”:800},{“key”:”1366×768″,”name”:”MacBook Air 11″,”width”:1366,”height”:768},{“key”:”1440×900″,”name”:”MacBook Air 13″,”width”:1440,”height”:900},{“key”:”1680×1050″,”name”:”MacBook Pro 15″,”width”:1680,”height”:1050},{“key”:”1920×1080″,”name”:”iMac 21″,”width”:1920,”height”:1080},{“key”:”2560×1440″,”name”:”iMac 27″,”width”:2560,”height”:1440}]

OK を押したら完了です。
レスポンシブデザインビューを開いている場合は一度閉じて開き直し、プルダウンにコピペしたリストが表示されていれば成功です!

このブログもレスポンシブデザインなのでよければ試してみてくださいね。

ads by google