手軽で良かったのでご紹介。レスポ
ンシブWebデザイン対応のサイト構築
のレイアウト確認用のjQueryプラグ
インです。開発補助用になりますね。
同じツールも沢山ありますけど。。

最近ご紹介したResponsivatorを使うのでなくてもいいっちゃいいんですけど、これはこれで良かったので。

jResize


表示されているWebサイトはiframeで呼び出しているものです。上部のバーでその場でiframeをリサイズ→レスポンシブなWebサイトの表示を確認出来る、というものです。


サイズを変えた状態。

コード

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="jresize.js"></script>

コアとプラグインを読み込みます。

$.jResize({
	viewPortSizes   : ['320px', '480px', '540px', '600px', '768px', '960px', '1024px', '1280px'],
	backgroundColor : '444', // HEX Code
	fontColor       : 'FFF' // HEX Code
});

あとはセッティングするだけ。確認したいサイズとバーの背景色、文字色を指定するだけ。

<body>
<iframe src="http://example.com/" style="width:100%;display:block;border:0;height:1000px;"></iframe>
</body>

マークアップはsrcを指定したiframeを用意するだけ。

ブックマークレットにしてもいいかもしれない。

jResize(via:jquer.in)