editors

View project onGitHub

jquery.strict-ios.js

iOS Safariかどうかをなるべく厳密に判定し、アドレスバーの非表示等の基本となるViewを設定するjQueryプラグイン。

プラグインの説明

iOS Safariに限定しても、1画面で利用可能なサイズは下の表のようなバリエーションが存在します。

iPhone4[S] iPhone5
Portrait Landscape Portrait Landscape
通常 WebClip 通常 最大化 WebClip 通常 WebClip 通常 最大化 WebClip
640 960 640 1136
832 920
(+40)
536 640 600
(+40)
1008 1096
(+40)
536 640 600
(+40)
iPad[mini] iPad Retina
Portrait Landscape Portrait Landscape
通常 WebClip 通常 WebClip 通常 WebClip 通常 WebClip
768 1024 1536 2048
928 1004
(+20)
672 748
(+20)
1856 2008
(+40)
1344 1496
(+40)
  • iPhone3G[S]は対象外としました。
  • iPod touchは第4世代、第5世代がそれぞれiPhone4[S]、iPhone5と同等扱いです。
  • WebClipモードの縦サイズはステータスバーを透過(black-translucent)した場合にカッコ内の数値増になります。ただし、ステータスバーが重なるエリアをデザインで利用するのは、なかなか難しいかと思われます。なお、通常は四隅がわずかに角丸であるのに対して、ステータスバーを透過(black-translucent)設定のWebClip起動に限っては四隅が直角になります。
そこで、jquery.strict-ios.jsでは緻密な画面レイアウトの実装を簡略化する仕組みを提供します。レスポンシブレイアウトやリキッドレイアウトといった可変性に富んだデザインはjQuery Mobile等の既存フレームワークを利用するほうが妥当です。
このライブラリの処理は、iOS Safariかどうかをなるべく厳密に判定し、画面領域を有効に使えるように初期設定します。

具体的には、次の処理を行ないます。
  • iOSデバイス&iOS Safari判定
  • デバイスの回転、スクロール、タッチイベントのリスナー登録
    ※コールバックハンドラ登録で状態変化に応じた最新のデバイス情報を参照可能
  • initial-scale をデバイスに適した値に調整
    ※iPhone4以降の縦(Portrait)表示の横幅を320pxではなく640pxに
  • jQueryの$(window).height() や $(window).width() では値を正確に取得できないため、jquery.strict-ios.js が返すオブジェクトに正しい値を保存
  • iPhoneで定番となっているアドレスバーを非表示にする処理
なお、iOS非標準のブラウザアプリは、画面サイズ自体や全画面表示の際のコントロール(戻るボタン等)の位置が様々である点やブラウザのユーザエージェントを偽装可能な点などの要因で対象外としています。

デモ

以下は、iOS Safariでアクセスした場合にのみ、このプラグインで取得可能な端末ステータスを表示するものです。
デバイス回転やiPhone Landscapeの場合の最大化、通常サイズの画面リサイズごとに高さ等のステータスが更新されます。

01
Mac用iOSシミュレータも対象
02
同上&WebClipモードでスターテスバー透過
03
Mac用iOSシミュレータは対象外

使い方

事前にjQuery(2.0.3で動作確認)を読み込んでください。
なお、WebClipモードに対応するためには、cache.manifestファイルも用意する必要があります。

Markup

HTML


<script src="../../external/jquery-2.0.3.min.js"></script>
<script src="../../lib/jquery.strict-ios.js"></script>
<div id="result"><div>
						

CODE


    var ios = $.strict.ios( {
        orientationchange : function(e, _ios) {
            reportInfomation(_ios);
        },
        scroll: function(e, _ios) {
            reportInfomation(_ios);
        }
    } );

	// プラグインから取得した情報を表示
    reportInfomation(ios);
    function reportInfomation(ios) {
        var result = '<div class="warning">iOS Safari以外のアクセスのようです。</div>';
        if ( typeof ios !== "undefined" ) {
            var info = ios.get();
            result = object2html( info );
        }
        $('#result').html(result);
    }
    function object2html( obj ) {
        var html = "<dl>";
        for ( var i in obj ) {
            html += "<dt>" + i + "</dt>";
            html += "<dd>" + obj[i] + "</dd>";
        }
        html += "</dl>";
        return html;
    }
						

OPTION

名前デフォルト値説明
appTitleundefinedstringホーム画面に追加(WebClipモード)の際に名前を指定したい場合のオプション。
isUseRatinatruebooleaniPad Retinaモデルの場合に、画面解像度を実寸で使用する。非Retinaと同じ解像度で統一する場合は、falseを指定。
isRejectSimulatorfalsebooleaniOSシミュレータ(Apple製)を対象外とする場合は、trueを指定。
isUserSelectNonetrueboolean長押しタップによるテキストや画像の選択(-webkit-user-select)を可能とする場合は、falseを指定。
isScrollableNonetruebooleanWebコンテンツエリアのフリック(touchMove)によるスクロールを許可する場合は、falseを指定。
isReloadOrientationtruebooleanデバイスを回転させた場合に、コンテンツをリロードさせたくない場合は、falseを指定。
orientationchangenullfunctionデバイス回転時のコールバックイベントハンドラ。
resizenullfunctioniPhone Landscapeで最大化とその解除時のコールバックイベントハンドラ。
scrollnullfunctionスクロール時のコールバックイベントハンドラ。