iOSでは、メイン画面にアイコンを追加したり、起動画面を追加したりします.

ソース: http://www.prower.cn/technic/2314
Native Appを開発する能力はありませんが、iOSのSafariブラウザの特性を利用して、小さな虚栄心を満たすために偽のWeb Appを作ることができます.
iOSでのSafariが振り回されている以上、コードで利用されているのも基本的にSafariのプライベート属性です.
メイン画面にアイコンを追加することは、Webアプリケーションの最初のステップです.<link rel="apple-touch-icon-precomposed" sizes="57x57" href="icon-57.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="icon-72.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="icon-114.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="icon-144.png">にアイコンを画面に追加するには、iOSで自動的にアイコンに追加されたレイヤのハイライトが適用されるかどうかという2つの属性値apple-touch-iconとapple-touch-icon-precomposedがあります.
iPhoneとiPadには2つの解像度のデバイスが存在するため、アイコンのサイズは4つ:144×144(iPad Retina)、72×72(iPad)、114×114(iPhone Retina)、57×57(iPhone).
sizesサイズを使用して、どのアイコンを呼び出すべきかをデバイスに伝えることができます.
アイコンがあっても似ていないので、起動画面を追加する必要があります.<link rel="apple-touch-startup-image" sizes="2048x1496" href="icon-2048x1496.png" media="screen and (min-device-width: 1025px) and (max-device-width: 2048px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2)">
<link rel="apple-touch-startup-image" sizes="1536x2008" href="icon-1536x2008.png" media="screen and (min-device-width: 1025px) and (max-device-width: 2048px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 2)">
<link rel="apple-touch-startup-image" sizes="1024x748" href="icon-1024x748.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)">
<link rel="apple-touch-startup-image" sizes="768x1004" href="icon-768x1004.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
<link rel="apple-touch-startup-image" sizes="640x920" href="icon-640x920.png" media="screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)">
<link rel="apple-touch-startup-image" sizes="320x460" href="icon-320x460.png" media="screen and (max-device-width: 320)"> apple-touch-startup-imageは起動画面を表示するために使用されますが、apple-touch-iconがsizesを指定してデバイスにどの画像を使用すべきかを教えることはできません(iOS 5ではsizes認識がサポートされていますが、テストに成功していません)、mediaのデバイス解像度の判断値でしか認識できません.一方、iPhone Retinaの解像度値は取値の間に境界があるため、Webkitのプライベート属性であるwebkit-min-device-pixel-ratio:2によって画素密度を識別する必要がある.
起動画面の画像サイズがデバイスのサイズに完全に等しいわけではありません.例えばiPad 2のサイズは1024です.×768ですが、起動画面のサイズは横1024です.×748、縦寸法768×1004は、システムバーの高さ20 pxを減算する必要があるため、Retina画面のiPhone 4およびiPad 3はステータスバーの高さ40 pxを減算する必要がある.
Web AppがNative Appのように動作するには、アドレスバー、ステータスバーなどのSafariのデフォルトコントロールを削除します.<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1.0, maximum-scale=1, user-scalable=no"> apple-mobile-web-app-capableは、アプリケーションの全画面表示を定義するために使用される.Apple-mobile-web-app-capableを定義した上で、ステータスバーの属性値apple-mobile-web-app-status-bar-styleを設定してこそ有効です.format-detectionの値は、Webページに表示される電話番号の自動検出を有効または無効にするために使用されます.
viewportはSafariのプライベート属性ではありません.widthは幅を指定し、initial-scaleは初期化のサムネイルスケールを指定し、minimum-scaleは縮小のスケールを指定します.maximum-scaleは拡大のスケールです.もちろん、これらのスケールはuser-scalableによって決まります.ユーザーがページをスケールできるかどうかを決定します.
修正:
New iPadはRetina画面を採用していますが、実際には物理解像度は変わっていません.1024*768なので、上記のコードのNew iPadの起動画面コードサイズが間違っています.<link rel="apple-touch-startup-image" sizes="2048x1496" href="icon-2048x1496.png" media="screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2)">
<link rel="apple-touch-startup-image" sizes="1536x2008" href="icon-1536x2008.png" media="screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 2)">