The library of development for editors

jquery.strict-ios.js

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

プラグインの説明

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

	Portrait		Landscape			Portrait		Landscape
	iPhone4[S]					iPhone5
	通常	WebClip	通常	最大化	WebClip	通常	WebClip	通常	最大化	WebClip
横	640		960			640		1136
縦	832	920 (+40)	536	640	600 (+40)	1008	1096 (+40)	536	640	600 (+40)

	Portrait		Landscape		Portrait		Landscape
	iPad[mini]				iPad Retina
	通常	WebClip	通常	WebClip	通常	WebClip	通常	WebClip
横	768		1024		1536		2048
縦	928	1004 (+20)	672	748 (+20)	1856	2008 (+40)	1344	1496 (+40)

iPhone3G[S]は対象外としました。
iPod touchは第４世代、第５世代がそれぞれ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

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