Safari向けWebアプリ開発の情報をまとめました。Safariの画面サイズを有効活用したいすでにコピペで拡散している情報をまとめるだけでは能がないので、すっかり定着したレスポンシブレイアウトに逆行しつつも「Webアプリ」として画面サイズを有効活用するための一連の情報になることを目的とします。Mobileや類似フレームワークもいくつか存在しますが、どうしても余計なスタイル定義や不透明な処理も多いので、よりライトに必要最小限の設定に留めたいという意図もあります。Safariではない」判定には、やはり便利です。Safari以外と考えてよいです。Safari以外で断定可能です。偽装不可能なレンダリングエンジンごとの実装(仕様)に基づいた判断ロジック(バグ等を応用したハックではない)のため、とても良い方法ではないかと思います。Safariによる偽装を回避する必要があります。Safariには「ホーム画面に設定する」という機能がありますが、この機能が有効かどうかは次のコードで判断可能です。Retinaを切り分けます。解像度と画面サイズでiOSデバイスを切り分けるメディアクエリを使った方法で、個人的にはあまり釈然としませんが、この情報も偽装が容易ではないと思われるため、現実解としては使わざるを得ないと思っています。場合は、iOSデバイス以外です。ダミー要素を追加しては、判定後すぐに削除という処理です。いう判定が真なら、それぞれiPhone4[S]、iPhone5、iPadになります。initial-scale(表示拡大率)の計算用に別途JavaScriptの処理に委ねます。iOSデバイスごとに適した設定レスポンシブレイアウトもいいのですが、確かにiPhone4[S]、iPhone5は小さいとはいえ、表現可能な解像度ではPCにそれほど劣っていません。それにもかかわらずiPhone3G[S]からの名残りなのか、横サイズを320pxで設計&実装するための情報ばかりが主流なのが残念です。Retinaは他のiOSデバイスと比べると逆に解像度が高すぎるため、場合によっては、initial-scale=0.5とする落としどころもアリではないかと思っています。);あとは、アドレスバーを隠す処理、不用意にフリックで画面スクロールしてしまわないための設定、テキストや画像のコピペ対策ですが、iPhoneのLandscapeのみ、アドレスバーを隠す方法は、ありふれた情報だけでなく、少し工夫が必要です。Landscapeのアドレスバーを確実に隠す方法これは、ほとんどそれらしい情報は存在せず、試行錯誤でなんとか挙動として問題ないと判断に至った手法です。最大化、非最大化のリサイズが発生したときのケアです。この処理を施さないと、アドレスバーが中途半端な位置で残ってしまう現象が発生します。イベントのリスナーでも呼び出します。);あとは、ごくありふれた設定です。href="favicon.ico">だいたい、こんなところかな?追加です。WebClipモードを意識する場合、オフラインファーストで.manifestファイルも用意したほうが良いですね。TYPE設定とHTMLタグで.manifestファイルの指定も必要です。Safari]フルスクリーンに対応させるmetaタグやスプラッシュ画像の指定iPadでHTML5でWebアプリを作ってみました。キャッシュを初めて使うwindow.navigator.onLineiPhone向けSafari専用のあれこれ。Safari限定のニーズがあるようなら、ぜひ使ってください。Safariかどうかをなるべく厳密に判定し、アドレスバーの非表示等の基本となるViewを設定するjQueryプラグインSourceForge.JPでいくつかjQueryプラグインを公開してみたものの、管理画面のメニュー構成がとても難解なため、今後はGitHubを利用します。作法も勝手もわからず悪戦苦闘中ながら、gh-pagesにサブドメインをCNAMEして運用し始めました。