手軽で良かったのでご紹介。レスポ
ンシブ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を用意するだけ。
ブックマークレットにしてもいいかもしれない。