レスポンシブデザインのサイトの見た目がデバイスの幅のどう変わるかを確認をするツールはいっぱいあります。でも大抵URL入力が必要です。面倒くさい。そんな私が使っている超絶便利な表示確認ツールを紹介します。
URL入力不要！超絶便利な表示確認ツール「Viewport Resizer」
「Viewport Resizer」は以下のサイトで配布されているブックマークレットです。
[img-link url=”http://lab.maltewassermann.com/viewport-resizer/” title=”Responsive design testing tool – Viewport Resizer – Emulate various screen resolutions – Best developer device testing toolbar”]
「Viewport Resizer」を使うには、まず、Viewport Resizerに行って、「CLICK OR BOOKMARK」 を、ブックマークバーにドラッグ&ドロップします。
すると「Resizer」 なるブックマークレットが出来ます。
表示を確認したいウェブページに行って「Resizer」をクリック。
すると表示確認用の黒いバーが出現。デバイスを表すアイコンがズラッと並びます。左から２番目のアイコンをマウスホバーするとiphoneと表示されるのでクリックしてみましょう。
そうするとiphone（縦長）で見た場合の表示が確認できます。次に、左から２番目のアイコンをもう一度クリックすると、
画面が９０度回転。横長表示になります。また、customize欄に数字を打ち込むと画面の大きさを自在にカスタマイズできます。
表示確認を終了する際は右上の×をクリックします。黒いバーが消えます。
レスポンシブデザインのデバイス別表示確認ツールとしては、私はもっぱら「Viewport Resizer」を使っています。
URL入力の必要がないのが素晴らしい。
その他予備としてURL入力が必要な表示確認ツール
なにこれ超便利！レスポンシブデザインのサイトが各デバイスでどう見えるかが一目瞭然！Adsenseの確認にもなるよ！ | なまら春友流で紹介されて大反響だった便利ツール。
[img-link url=”http://mattkersley.com/responsive/” title=”Responsive Design Testing”]
続いて、@web_shufuが「Viewport Resizer」以前に愛用していたツール。
Screenfly / Test Your Website at Different Screen Resolutions
その予備。
responsivepx – find that tricky breakpoint
予備の予備。
もっとツールを見たいなら
@web_shufu的にはすでに紹介したものでおなかいっぱいですが、レスポンシブツールを沢山まとめた記事もあるので、もっとツールを見たい方はご参考に。