簡単なNative Appを作成します.「メイン画面に追加」を使用します.

iOSでは、Safariをメイン画面に追加して好きなサイトをメイン画面に追加できるので、この特徴を利用して、Html 5などを加えて、簡単なNativeアプリを作ることができます.Safariを使用してHELLOにアクセスし、メイン画面に追加して効果を観察することができます.
アイコンを追加:

<link rel=”apple-touch-icon-precomposed” sizes=”57×57″ href=”icon-57.png”>
<link rel=”apple-touch-icon-precomposed” sizes=”72×72″ href=”icon-72.png”>
<link rel=”apple-touch-icon-precomposed” sizes=”114×114″ href=”icon-114.png”>
<link rel=”apple-touch-icon-precomposed” sizes=”144×144″ 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=”2048×1496″ href=”icon-2048×1496.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=”1536×2008″ href=”icon-1536×2008.png” media=”screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 2)”>
<link rel=”apple-touch-startup-image” sizes=”1024×748″ href=”icon-1024×748.png” media=”screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)”>

<link rel=”apple-touch-startup-image” sizes=”768×1004″ href=”icon-768×1004.png” media=”screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)”>

<link rel=”apple-touch-startup-image” sizes=”640×920″ href=”icon-640×920.png” media=”screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)”>

<link rel=”apple-touch-startup-image” sizes=”320×460″ href=”icon-320×460.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を減算する必要がある.
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”>

これで簡単なNative Appが完成しました.