今、設計スタイルとインタラクティブなWebアプリケーションを、ネイティブアプリケーションと同様の多くの開発者は、例えば、そのスケーリングは、iOS上で画面全体にフィット。あなたは、メイン画面に追加すると、あなたのカスタムWebアプリケーション用のiOSのSafariのように、それは同じことによって、ネイティブアプリケーションのように見えることができます。あなたは無視iOSの設定他のプラットフォームを使用してこれを行うことができます。
たとえば、Webアプリケーションのアイコンの指定アイコンを表すために使用することができるようにウェブアイコン指定されたWebクリップとして、iOSのホーム画面に追加されます。あなたは、メイン画面からWebアプリケーションを起動すると、あなたはまた、このような外観の変更など、iOSのユーザーインターフェース上のSafariを最小限に抑え、ステータスバーのSafariユーザーインターフェイスコンポーネント（検索バーやツールバー）を非表示にすることができます。これらはあなたのページのコンテンツに追加するためのオプション設定しているときに、他のプラットフォームでは無視されます。
読むのWebアプリケーション「ビューポート設定」をどのように学ぶためにiOSのビューポートのWebアプリケーションを設定します。
指定されたWebアイコンWebアプリケーション
あなたは、ユーザーがiOSデバイスのホーム画面にアプリケーションやWebページのリンクを追加できるようにしたいかもしれません。これらのリンクは、Webクリップと呼ばれるアイコンで表示されます。お使いのiOSアプリケーションまたはWebページを表すアイコンを指定するためにこれらの簡単な手順に従ってください。
サイト全体（サイト上のすべてのページ）のアイコンを指定するには、ルートという名前のフォルダドキュメントに配置されているPNG形式のファイルのアイコン配置リンゴタッチを-icon.pngの
単一のウェブページやウェブサイトのアイコンを指定するにはアイコンは以下のように、Webページへのリンク要素を追加し、特定のアイコンページに置き換えられます。
<link rel =“apple-touch-icon”href =“/ custom_icon.png”>
上記の例では、あなたのアイコンファイルの名前に置き換えcustom_icon.png。
（例えば、両方のiPhoneとiPadデバイスをサポートしています）別のデバイスの解像度のための複数のアイコンを指定するには、次のように各リンク要素のプロパティのサイズを追加してください。
<link rel =“apple-touch-icon”href =“touch-icon-iphone.png”>
<link rel =“apple-touch-icon”sizes =“152x152”href =“touch-icon-ipad.png”>
<link rel =“apple-touch-icon”sizes =“180x180”href =“touch-icon-iphone-retina.png”>
<link rel =“apple-touch-icon”sizes =“167x167”href =“touch-icon-ipad-retina.png”>
最も適切なデバイスアイコンを使用します。現在のアイコンのサイズや提案については、iOSのヒューマンインターフェイスガイドライン「グラフィックス」の章を参照してください。
デバイスアイコンのサイズと一致して何ら示唆がない場合は、アイコンがより推奨される最小サイズよりも使用されます。アイコンの推奨サイズよりも大きく存在しない場合、最大のアイコンが使用されています。
アイコンを指定するには、link要素を使用しない場合は、リンゴタッチアイコン...接頭アイコンで検索して、サイトのルートになります。デバイスの適切なアイコンのサイズは58のx 58である場合、システムは次の順序でファイル名を検索します。
- リンゴタッチアイコン80x80.png
- リンゴタッチicon.pngと
注：iOSの7のSafariは、アイコンなどのエフェクトを追加しません。Safariの古いバージョンの命名-precomposed.png接尾辞を使用してアイコンファイルにエフェクトを追加しません。詳細については、ステップ1を参照してください：iTunesの接続でアプリケーションを識別します。
- 起動画面の画像を指定します
iOSでは、ネイティブアプリケーションは同様に、Webアプリケーションの起動時に起動画面イメージが表示指定することができます。Webアプリケーションは、オフラインのときに非常に有用です。デフォルトでは、アプリケーションは、最後のスタートのウェブスクリーンショットを使用します。次のように別の起動画面を設定するには、ページ上のリンク要素を追加します。
<link rel =“apple-touch-startup-image”href =“/ launch.png”>
上記の例では、ファイル名を使用して起動画面を交換launch.png。現在の起動画面のサイズや提案については、iOSのヒューマンインターフェイスガイドライン「グラフィックス」の章を参照してください。
[スタート]アイコンのタイトルを追加します。
iOSでは、あなたは開始アイコン用のWebアプリケーションのタイトルを指定することができます。デフォルトでは、<タイトル>タグを使用しました。以下のように、ページにメタタグを追加し、別のタイトルを設定するには：
<meta name =“apple-mobile-web-app-title”content =“AppTitle”>
上記の例では、あなたのタイトルをAppTitle交換してください。
Safariのユーザ・インタフェース・コンポーネントを隠します
iOSでは、Webアプリケーションの最適化の一環として、それは、ローカルアプリケーションを使用して、よりスタンドアロンモードのようなものです。あなたはこのスタンドアローンモードを使用すると、Safariのは、Webコンテンツを表示するために使用されることはありません - 具体的には、ブラウザのURLテキストフィールドのない画面の上部、または画面の一番下にありませんボタンバー。唯一のステータスバーは、画面の上部に表示されます。読むには、ステータスバーの外観を最小限にする方法については、ステータスバーを変更します。
yesにリンゴモバイルウェブアプリ対応のメタタグセットは、独立モードを開きます。たとえば、次のHTMLを表示Webコンテンツにスタンドアロンモードで使用されます。
<meta name =“apple-mobile-web-app-capable”content =“yes”>
あなたは、Webページがスタンドアローンモードで表示されているかどうかを判断するためのJavaScript window.navigator.standalone読み取り専用で、Boolean型のプロパティを使用することができます。スタンドアロンモードの詳細については、アップルのモバイルウェブアプリ対応を参照してください。
ステータスバーの外観を変更します
Webアプリケーションは、スタンドアローンモードで表示されている場合は、ネイティブアプリケーションとして、あなたは、iOSのステータスバーに表示される画面の上部を最小限に抑えることができます。そう、ステータスバースタイルのメタタグを使用します。
あなたが最初に、スタンドアローンモードでのSafariのユーザーインターフェイスコンポーネントを非表示に指定しない限り、そうでない場合は、このメタタグが機能しません。その後、ステータスバーの外観を変更するには、アプリケーションのニーズに応じて、ステータスバーのスタイルのMETAタグリンゴモバイルウェブアプリ - ステータスバーのスタイルを使用しています。あなたが画面全体を使用したい場合たとえば、ステータスバーのスタイルが半透明の黒に設定されている設定。
例えば、黒に次のHTMLのステータスバーの背景色：
<meta name =“apple-mobile-web-app-status-bar-style”content =“black”>
ステータスバーの外観の詳細については、「UI欄」の章のためのiOSヒューマンインターフェイスガイドラインを参照してください。
他のネイティブアプリケーションへのリンク
Webアプリケーションは、URLで特別なリンクを作成することによって構築された他のiOSアプリにリンクすることができます。利用できる機能は、（インストールされている場合）、そのネイティブアプリケーションで電話番号をダイヤル、またはテキストメッセージIMessageが、YouTubeの動画を送信して開いています。例えば、電話番号、次の形式で構成されたアンカー要素にリンクします。
<a href="tel:1-408-555-5555">给我打电话</a>
これらの機能の完全なビューについては、Apple社にスキームリファレンスのURLを。
これは、プロジェクトのindex.htmlに追加されたコードのIです：
<!-- Specifying a Webpage Icon for Web Clip for Safari -->
<link rel="apple-touch-icon" href="assets/imgs/logo.png">
<!-- Specifying a Launch Screen Image for Safari -->
<link rel="apple-touch-startup-image" href="assets/imgs/splash.png">
<!-- Hiding Safari User Interface Components -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Changing the Status Bar Appearance -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
以下のように実際の経験：
ユーザーがアイコンで、メイン画面に追加し、アドレスバーとツールバー、同じとのネイティブな経験を持っていないのに役立つオープンサファリWebアプリケーションの定義から描き始める見ることができます。
私が使用しているためiphoneはトップのステータスバーの背景が占有されているので、実際の数字は、フルスクリーンでの経験を開始することで、画面録画機能が付属しています。