iPhoneとAndroidというこの2つのすごいスマートフォンOSが発表されて以来、インターネット業界には新しい言葉「WebApp」（WEBベースのアプリケーション、ハイエンドモバイル端末上で動作する）が登場しました。
開発者ならご存知のとおり、ハイエンドスマートフォンOSには2種類のアプリケーションがあります。1つはローカル（OS）で動作するAPP、もう1つはハイエンド端末のブラウザで動作するWebAppです。本記事では主に後者について解説します。
一、META/LINK関連：
1、百度によるトランスコードを禁止
百度手机でWebページを開くと、百度があなたのページをトランスコードし、広告を貼り付けることがあります。非常に迷惑です。しかし、このmetaタグを使うことでそれを防ぐことができます：
<meta http-equiv="Cache-Control" content="no-siteapp" />
関連リンク：SiteApp トランスコード宣言
2、ホーム画面に追加した後のタイトル（IOS）
<meta name="apple-mobile-web-app-title" content="标题">
3、WebAppの全画面モードを有効にする（IOS）
Webサイトをホーム画面に追加してからタップして起動すると、アドレスバーを非表示にできます（ブラウザからの遷移やリンク入力でアクセスした場合はこの効果はありません）。
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-touch-fullscreen" content="yes" />
PS：しかし、自分の5Sでテストしたところ、”apple-touch-fullscreen”を設定してもあまり意味がありませんでした。詳しい方がいれば、下部のコメントで教えてください。
4、ステータスバーの背景色を設定（IOS）
ステータスバーの背景色の設定は、”apple-mobile-web-app-capable” content=”yes” のときのみ有効になります。
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
content パラメータ：
- default：ステータスバーの背景は白。
- black：ステータスバーの背景は黒。
- black-translucent：ステータスバーの背景は半透明。default または black に設定した場合、Webコンテンツはステータスバーの下から始まります。black-translucent に設定した場合、Webコンテンツは画面全体に広がり、上部がステータスバーで覆われます。
6、モバイル端末での電話番号認識（IOS）
iOS Safariでは（他のブラウザやAndroidでは発生しません）、電話番号のように見える数字が電話リンクとして処理されます。例：
- 7桁の数字、例：1234567
- 括弧とプラス記号を含む数字、例：(+86)123456789
- ハイフンを含む数字、例：00-00-00111
- 11桁の数字、例：13800138000
他の形式の数字も認識される可能性があります。次のmetaで電話番号の自動認識を無効にできます：
<meta name="format-detection" content="telephone=no" />
ただし、電話番号の自動認識を無効にした後でも、特定の電話番号を長押ししたときにiPhoneの通話機能やSMS機能にリンクさせたい場合があります。その場合は、以下の方法で実現できます：
（2）通話機能を有効にする：
<a href=”tel:123456″>123456</a>
（3）SMS機能を有効にする：
<a href=”sms:123456″>123456</a>
7、モバイル端末でのメールアドレス認識（Android）
電話番号の認識と同様に、Androidではメールアドレス形式の文字列が認識されます。次のmetaでメールアドレスの自動認識を無効にできます：
<meta content=”email=no” name=”format-detection” />
同様に、タグ属性を使ってメールアドレスを長押ししたときにメール作成機能をポップアップさせることもできます：
<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>
8、Smart App Banner（スマートAppバナー）を追加（IOS 6+ Safari）
<meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”>
9、IOS Web app起動アニメーション
iPadの起動画面はステータスバー領域を含みません。そのため、起動画像は、ステータスバー領域に対応する方向の20pxサイズを差し引く必要があります。retinaデバイスではさらに40pxのサイズを差し引きます。
<!-- iPhone --> <link href="apple-touch-startup-image-320x460.png.html" media="(device-width: 320px)" rel="apple-touch-startup-image"> <!-- iPhone (Retina) --> <link href="apple-touch-startup-image-640x960.png.html" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <!-- iPad (portrait) --> <link href="apple-touch-startup-image-768x1004.png.html" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image"> <!-- iPad (landscape) --> <link href="apple-touch-startup-image-748x1024.png.html" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image"> <!-- iPad (Retina, portrait) --> <link href="apple-touch-startup-image-1536x2008.png.html" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <!-- iPad (Retina, landscape) --> <link href="apple-touch-startup-image-2048x1496.png.html" media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
（landscape：横屏 | portrait：竖屏）
10、ホーム画面に追加した後のAPPアイコン
web appをホーム画面に追加した後のアイコンパスを指定します。少し異なる2つの方法があります：
<!-- 设计原图 --> <link href="short_cut_114x114.png.html" rel="apple-touch-icon-precomposed"> <!-- 添加高光效果 --> <link href="short_cut_114x114.png.html" rel="apple-touch-icon">
- apple-touch-icon：IOS6以下のバージョンでは、アイコンにハイライト効果が自動的に追加されます（IOS7以降はフラットデザインが採用されています）
- apple-touch-icon-precomposed：「オリジナルデザインのアイコン」を使用する
効果：
アイコンサイズ：
size属性を指定することで、異なるデバイスに異なるアイコンを提供できます（ただし通常は、114 x 114 pixelsのアイコンを1つ提供するだけで十分です）。
公式の説明は以下のとおりです
Create different sizes of your app icon for different devices. If you're creating a universal app, you need to supply app icons in all four sizes.
For iPhone and iPod touch both of these sizes are required:
- 57 x 57 pixels
- 114 x 114 pixels (high resolution)
For iPad, both of these sizes are required:
- 72 x 72 pixels
- 144 x 144 (high resolution)
11、最新バージョンのIEとChromeを優先的に使用
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
二、HTML/CSS
1、iOSキーボードの先頭文字自動大文字を無効化
iOSでは、デフォルトでキーボードの先頭文字大文字化が有効になっています。この機能を無効にするには、次のようにします：
<input type="text" autocapitalize="off" />
2、iOSの入力自動修正を無効化
英文入力でデフォルトで先頭文字が自動大文字になるのと同様に、IOSには入力内容を自動修正する機能があります。そのため、ユーザーはしばしば二度操作する必要があります。この機能を有効にしたくない場合は、inputタグの属性で無効にできます：
<input type="text" autocorrect="off" />
3、テキストのズームを禁止
モバイル端末で縦横画面を切り替えると、テキストサイズが再計算され、それに応じて拡大・縮小されます。この動作が不要な場合は、無効にすることができます：
html {
-webkit-text-size-adjust: 100%;
}
注意すべき点として、PC版ではこの属性はすでに削除されています。この属性をモバイル端末で有効にするには、`meta viewport` を設定する必要があります。
4、モバイル端末で入力ボックス内の影を消す方法
iOSでは、入力ボックスにデフォルトで内部影がありますが、box-shadow では消せません。影が不要な場合は、次のようにして無効にできます：
input,
textarea {
border: 0; /* 方法1 */
-webkit-appearance: none; /* 方法2 */
}
5、高速バウンススクロール
まず、モバイルブラウザにおけるバウンススクロールの歴史を見てみましょう：
- 初期のモバイルブラウザは、body以外の要素のスクロールバーをサポートしていなかったため、一般的にiScrollを利用していました。
- Android 3.0/iOSはbody以外の要素のスクロール問題を解決しましたが、スクロールバーは表示されず、iOSでは2本の指でしかスクロールできませんでした。
- Android 4.0はスクロールバーが表示されない問題を解決し、高速バウンススクロール効果を追加しましたが、その後この機能は削除されました。
- iOSは5.0からスクロールバーが表示されない問題を解決し、高速バウンススクロール効果を追加しました。
iOSで要素にNativeのようなスクロール効果を持たせたい場合は、次のようにします：
.xxx {
overflow: auto; /* auto | scroll */
-webkit-overflow-scrolling: touch;
}
PS：iScrollは使ってみた感じがあまり良くなく、奇妙なバグがいくつかあります。ここでは別の iDangero Swiper を勧めます。このプラグインはスワイプスクロールの強力な機能（3D対応）を統合しており、バウンススクロール用の内蔵スクロールバーもあります。公式サイト：
http://www.idangero.us/sliders/swiper/index.php
6、モバイル端末でコンテンツの選択を禁止
ユーザーがページ内のコンテンツを選択できないようにしたい場合は、CSSで無効にできます：
.user-select-none {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all （移动端不需要） */
-ms-user-select: none; /* IE 10+ */
}
7、モバイル端末でタッチハイライト効果を無効化
モバイル端末向けページを作成すると、すべてのaタグがクリックされたとき、または疑似クラス :active が設定されたすべての要素が、デフォルトでアクティブ状態のときにハイライト枠を表示することがわかります。このハイライトが不要な場合は、CSSの以下の方法でグローバルに無効にできます：
html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
しかし、この方法はSamsungの端末では無効です。妥協策として、ページ内で実際に遷移しないリンクのaタグを他のタグに置き換えることで、この問題を解決できます。
8、画像の保存やコピーを禁止する方法（IOS）
通常、スマートフォンやタブレットで画像 img を長押しすると、「画像を保存」や「画像をコピー」というオプションが表示されます。ユーザーにこの操作をさせたくない場合は、次の方法で禁止できます：
img { -webkit-touch-callout: none; }
出典：http://www.cnblogs.com/WhiteCusp/p/4502961.html