Kindleなどスマフォやタブレットのビューポートのサイズでエミュレートして表示するレスポンシブ対応サイト制作時に役立つjQueryのプラグインを紹介します。-GitHubrFrameのデモrFrameの使い方rFrameのデモまずは、下記のようなデスクトップ用のページがあるとします。デモでは、これをスマフォ・タブレットのサイズにエミュレートして表示します。通常時:デスクトップサイズデモページにアクセスすると、デフォルトでiPhoneサイズの表示になります。上部のバーで、デバイスの切替ができます。各デバイスは縦・横表示にも対応しています。デモページ:iPhoneサイズで表示Androidサイズで表示してみます。デモページ:Androidサイズで表示スマフォだけでなく、タブレットも用意されています。iPadサイズで表示します。デモページ:iPadサイズで表示Kindleも用意されています。デモページ:Kindleサイズで表示デバイスの種類やサイズは、スクリプトに手を加えることで変更したり増やすことができます。外部ファイル「jquery.js」と当スクリプトを</body>の上に記述します。スクリプトの実行ブラウザでページを開き、コンソールに次のテキストを入力します。$.rFrame()セレクトメニューが表示されるので、デバイスやオリエンテーションを選択します。デバイスを予め指定する場合は、下記のように入力します。例:iPadで表示$.rFrame({device:'iPad',view:1})コンソールではなく、スクリプトを記述して実行することもできます。});</script>オプションオプションで背景やツールバーのカラー、デフォルトのデバイスやオリエンテーションを設定できます。