WebAppをiOSデスクトップに追加

iOSのsafriブラウザは、独立したアプリケーションとして実行するWebページをデスクトップに追加できます.
もちろん、ここではwebAppの作り方について議論しません.これはhtml 5に関する知識と開発経験が必要です.ここでは、WebAppがデスクトップを追加してから起動するまでの詳細についてのみ説明します.
全画面表示:

<meta name="apple-mobile-web-app-capable" content="yes" />

システムトップバーの色(黒と白):

<meta name="apple-mobile-app-status-bar-style" content="white" />
<meta name="apple-mobile-app-status-bar-style" content="black" />

デスクトップ・スレッド・アイコン(設定しない場合、アイコンはWebページのスクリーンショットを表示します:

<link rel="apple-touch-icon" href="icon.png" />

しかし、iOSはこのアイコンに多情にハイライトを付けます.アイコンがハイライトされないようにするには、次のようにします.

<link rel="apple-touch-icon-precomposed" href="icon.png" />

異なるデバイスに異なるiconをマッチングしたい場合は、sizeプロパティを追加します.

<link rel="apple-touch-icon" size="72x72" href="icon-ipad.png" />
<link rel="apple-touch-icon" size="114x114" href="icon-iphone4.png" />

 
 
プログラムの起動中に起動画面を指定する必要があります.そうしないと、白画面やスクリーンショットは不快です.iOSにはipadとiPhone/ipod touchがあります.ipadの起動画面は縦横に分かれており、画面のサイズは1024*768、768*1024でなければなりません.iPhoneとipod touchは縦画面ですが、Retina画面と非Retina画面の区別があります.また、起動画面のサイズは、画面のサイズではなく(画面幅)*(画面高さ-20)である.すなわち、非Retinaのサイズは320*460、Retina画面のサイズは640*920である.起動画面の導入はメディアクエリーをサポートします.したがって、media queryによってipadの縦横スクリーンに異なる図を導入することができる.

<link rel="apple-touch-start-image" href="landScape.png" madia="screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:landscape)" />
<link rel="apple-touch-start-image" href="portait.png" madia="screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:portait)" />

　　
しかし、メディアクエリーではRetina画面が分からないので、jsでhack:まず、普通の解像度に320*460の画像を導入します.

<link rel="apple-touch-start-image" href="start.png"media="screen and (max-device-weidth:320px)" />

Retina  js:

if((app.device.type === "iPhone" || app.device.type === "iPod")
    && app.device.version >= '5'
    && window.devicePixelRatio >= 2){
	$('head').append($('<link rel="apple-touch-startup-image" href="start-640-920.png" />'));
}