毎度、必要になったときに調べていたiOS Safari向けWebアプリ開発の情報をまとめました。

iOS Safariの画面サイズを有効活用したい

すでにコピペで拡散している情報をまとめるだけでは能がないので、すっかり定着したレスポンシブレイアウトに逆行しつつも「Webアプリ」として画面サイズを有効活用するための一連の情報になることを目的とします。
もっとも、そういうことならすでにjQuery Mobileや類似フレームワークもいくつか存在しますが、どうしても余計なスタイル定義や不透明な処理も多いので、よりライトに必要最小限の設定に留めたいという意図もあります。

まずは判定

UserAgentで大雑把にふるい落とす

容易に偽装可能なUserAgentですが「iOS Safariではない」判定には、やはり便利です。下記で browser が “Safari” でない場合は、iOS Safari以外と考えてよいです。

Webkitかどうかを厳密に判定する

さらに今度は、下記で engine が “Webkit” でない場合は、iOS Safari以外で断定可能です。ほぼ偽装不可能なレンダリングエンジンごとの実装(仕様)に基づいた判断ロジック(バグ等を応用したハックではない)のため、とても良い方法ではないかと思います。

ここまでで、SafarikかつWebkitなら、ほぼiOS Safariと見なせますが、PC Safariによる偽装を回避する必要があります。

スマホ独特のプロパティでPCを排除する

iOS Safariには「ホーム画面に設定する」という機能がありますが、この機能が有効かどうかは次のコードで判断可能です。


最後にiPhone4[S]、iPhone5、iPad、iPad Retinaを切り分けます。

解像度と画面サイズでiOSデバイスを切り分ける

メディアクエリを使った方法で、個人的にはあまり釈然としませんが、この情報も偽装が容易ではないと思われるため、現実解としては使わざるを得ないと思っています。

■CSS定義

■JavaScript

device に “iphone4″, “iphone5″, “ipad” のいずれかが代入されますが、もし “” の場合は、iOSデバイス以外です。
念のため、説明しておくと、原則は不可視となるように定義した .dummy-device-class というクラスを指定しつつ、#iphone4、#iphone5、#ipadという ID でダミー要素を追加しては、判定後すぐに削除という処理です。
メディアクエリでは、回転方向とアスペクト比、iPhone4[S]用にはさらに解像度(device-pixel-ratio)に応じて、#iphone4、#iphone5、#ipadの有効無効が振り分けられるため、$(“#”+id).css(“display”) === “block” という判定が真なら、それぞれiPhone4[S]、iPhone5、iPadになります。

上記CSS定義と、JavaScript判定を増やせば iPad Retina もここで判断することは可能ですが、横×縦の総ピクセル数で非Retinaの4倍ということもあり、あえて initial-scale(表示拡大率)の計算用に別途JavaScriptの処理に委ねます。

iOSデバイスごとに適した設定

レスポンシブレイアウトもいいのですが、確かにiPhone4[S]、iPhone5は小さいとはいえ、表現可能な解像度ではPCにそれほど劣っていません。それにもかかわらずiPhone3G[S]からの名残りなのか、横サイズを320pxで設計&実装するための情報ばかりが主流なのが残念です。

本来iOSデバイスが表現可能な解像度に設定する

原則は initial-scale=1.0 ですが、iPad Retinaは他のiOSデバイスと比べると逆に解像度が高すぎるため、場合によっては、initial-scale=0.5とする落としどころもアリではないかと思っています。

あとは、アドレスバーを隠す処理、不用意にフリックで画面スクロールしてしまわないための設定、テキストや画像のコピペ対策ですが、iPhoneのLandscapeのみ、アドレスバーを隠す方法は、ありふれた情報だけでなく、少し工夫が必要です。

iPhone Landscapeのアドレスバーを確実に隠す方法

これは、ほとんどそれらしい情報は存在せず、試行錯誤でなんとか挙動として問題ないと判断に至った手法です。
重要なのは、デバイス回転で Landscape に切り替わったときと、Landscape で最大化、非最大化のリサイズが発生したときのケアです。
つまり、この処理を施さないと、アドレスバーが中途半端な位置で残ってしまう現象が発生します。

上記の処理を orientationchange イベントのリスナーでも呼び出します。

あとは、ごくありふれた設定です。

ごくありふれた設定の数々(ばかりでもないか!?)

不用意にフリックで画面スクロールさせない

テキストや画像のコピペ対策

WebClipモードでツールバーを非表示

イマイチ実用性に欠けるがWebClipでステータスバーを透過する

ホーム画面に設定の際の名称を指定

ホーム画面に設定の際のアイコンを指定

ただ、このタグ埋め込まなくても、ちゃんとWebサーバにGETリクエスト飛んでくるんですよね・・・
光沢処理なしは、rel=”apple-touch-icon-precomposed” です。

WebClipモード用にスプラッシュ画像も指定できちゃうらしい

そこまでWebClip(Standalone)にこだわってるわけでもないので、試していませんm(__)m

未だに16px四方ってのも・・・と思いつつのfavicon

だいたい、こんなところかな?

追加です。
WebClipモードを意識する場合、オフラインファーストで.manifestファイルも用意したほうが良いですね。
また、その場合、WebサーバのMIME TYPE設定とHTMLタグで.manifestファイルの指定も必要です。Apacheならconfファイルか、AllowOverride設定がなされているなら .htaccess に以下を記述します。

参考情報

とても参考になりました

[修正]iPadのSafariでwebclip(webAppモード)かどうかを判断するJavascript
mobile safariのmetaタグのサポートをまとめてみた
iOSでウェブサイトをフルスクリーン表示させる
Memo, [iOS][mobile Safari]フルスクリーンに対応させるmetaタグやスプラッシュ画像の指定
iPadでHTML5でWebアプリを作ってみました。

このあたりも選別&網羅したいと思ってます

アプリケーション キャッシュを初めて使う
window.navigator.onLine
iPhone向けSafari専用のあれこれ。
Memo, iOS 6 + Standalone mode + Full screen 指定だとGPS(Geolocation)が使えない

といった処理をjQueryプラグインでGitHubに公開

スプラッシュやアイコン設定は迷って網羅していませんが、上記の処理をGitHubに置いたので、iOS Safari限定のニーズがあるようなら、ぜひ使ってください。

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

SourceForge.JPでいくつかjQueryプラグインを公開してみたものの、管理画面のメニュー構成がとても難解なため、今後はGitHubを利用します。まだまだ作法も勝手もわからず悪戦苦闘中ながら、gh-pagesにサブドメインをCNAMEして運用し始めました。