[JS]面倒なスマフォ・タブレットでの異なるビューポートサイズの確認が簡単にできるスクリプト -rFrame

サイト構築 -JavaScript

Post on:2013年7月3日

sponsorsr

制作した（制作中）のウェブページをiPhone, Android, iPad, Kindleなどスマフォやタブレットのビューポートのサイズでエミュレートして表示するレスポンシブ対応サイト制作時に役立つjQueryのプラグインを紹介します。

rFrame -GitHub

rFrameのデモ
rFrameの使い方

rFrameのデモ

まずは、下記のようなデスクトップ用のページがあるとします。
デモでは、これをスマフォ・タブレットのサイズにエミュレートして表示します。

通常時：デスクトップサイズ

デモページにアクセスすると、デフォルトでiPhoneサイズの表示になります。

デモページ：iPhoneサイズで表示

上部のバーで、デバイスの切替ができます。
また、各デバイスは縦・横表示にも対応しています。

デモページ：iPhoneサイズで表示

Androidサイズで表示してみます。

デモページ：Androidサイズで表示

スマフォだけでなく、タブレットも用意されています。
iPadサイズで表示します。

デモページ：iPadサイズで表示

Kindleも用意されています。

デモページ：Kindleサイズで表示

デバイスの種類やサイズは、スクリプトに手を加えることで変更したり増やすことができます。

rFrameの使い方

Step 1: 外部ファイル

「jquery.js」と当スクリプトを</body>の上に記述します。

<body>
  ...
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="js/jquery.rframe.js"></script>
</body>

Step 2: スクリプトの実行

ブラウザでページを開き、コンソールに次のテキストを入力します。

$.rFrame()

セレクトメニューが表示されるので、デバイスやオリエンテーションを選択します。

デバイスを予め指定する場合は、下記のように入力します。
例：iPadで表示

$.rFrame({device:'iPad',view:1})

コンソールではなく、スクリプトを記述して実行することもできます。

<script>
    $.rFrame({
        device:'iPad',
        view:1
    });
</script>

オプション

オプションで背景やツールバーのカラー、デフォルトのデバイスやオリエンテーションを設定できます。

$.rFrame({
    background : '#dedede',/* bodyの背景カラー */
    color : '#dedede',/* ツールバーのテキストカラー*/
    toolbar_bg: '#333',/* ツールバーの背景カラー */
    btn_bg: '#3e8ec0',/* Portrait/Landscapeボタンの背景カラー  */
    btn_color: '#fff',/* Portrait/Landscapeボタンのテキストカラー  */
    font: 'Verdana',/* ツールバーのフォント  */
    device:'iPhone5',/* デフォルトのデバイス */
    device_color : '#d0d0d0',/* デバイスのカラー */
    view : 0,/* デフォルトのオリエンテーション portrait = 0, landscape = 1 */
    forkme: true,/* GitHubバナーの表示の有無 */
});