モバイルプラットフォームにおけるmetaタグの使用

一、metaタグは二大部分に分けられています.HTTPタイトル情報(http-equiv)とページ記述情報(name).
1、http-equiv属性のConttentt-Type値(文字セットの設定を表示する)
説明:ページで使用する文字セットを設定し、ホームページで使用する文字言語を説明するために使用します.ブラウザはこれに基づいて該当する文字セットを呼び出してページ内容を表示します.
使い方:
1<meta  http-equiv="Content-Type"  content="text/html; charset=utf-8"  />注意:このmetaタグはHTMLページで使用されている文字セットをutf-8と定義しています.万国コードです.同じページで中国語の簡体字、繁体字、その他の言語(日本語、韓国語など)を表示することができます.
2、name属性のviewport値(モバイル画面のスケーリング)
つまり可視領域です.デスクトップブラウザについて、私たちはすべてのツールバー、ステータスバー、スクロールバーなどを除いて、ウェブページを見るためのエリアをよく知っています.これは本当に有効なエリアです.モバイルデバイスの画面幅は従来のウェブとは異なりますので、viewport値を変更する必要があります.
実際に操作できる属性は4つあります.
width–/viewportの幅(200から10,000までの範囲で、デフォルトは980ピクセル)height–/viewportの高さ(範囲は223から10,000まで)initial-scale–/初期のスケーリング比率(範囲は＞0から10まで)minimum-scale–/ユーザーが縮小できる最小スケールのmaximm-scale–/ユーザーが縮小できる最大スケールのuser-scalable–/ユーザーが手動でスケーリングできるかどうか(no,yes)
1<meta  name="viewport"  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"  />説明:

強制的に文書と装置の幅を1:1に保つ.

文書の最大幅比列は1.0である.

user-scalableは、ユーザが手動でスケーリングできるかどうかを定義し、ページ固定デバイスの上のサイズを設定します.

注意:実際のテストでは、いくつかのAndroidシステムのブラウザはこのルールをサポートしていません.ページを拡大することができます.一旦拡大応答のboxも拡大すると、ページが乱れてしまいます.解決方法:ページの最小幅を定義します.
1
2
3body {    min-width: 320px;}3、name属性のformat-detection値(ページ中の数字を無視して電話番号と識別する)
1<meta  name="format-detection"  content="telephone=no"  />説明:

は、デバイスにウェブページを閲覧させる際に、数字に対して電話機能を有効にしない(デバイス別の解釈では、iTouchは連絡先を保存するための数字をクリックし、iPhoneは電話番号として認識する).

電話機能を有効にしたいなら、telephone=yesで結構です.ページの上にGoogle Mapsがあれば、iTunesとYouTubeのリンクはiosデバイス上で対応するプログラムコンポーネントを開けます.

4、name属性のapple-mobile-web-app-capable値(ウェブサイトオープンのウェブアプリへのサポート)
1<meta  name="apple-mobile-web-app-capable"  content="yes"  />説明:

ウェブサイトはウェブアプリのサポートを開始します.

このmetaは、コンテンツが「アップルデバイスwebアプリケーションxx」であることが分かります.つまり、このmetaはウェブアプリケーションを専門に定義しているのです.

5、name属性のapple-mobile-web-app-status-bar-style値(トップのステータスバーの色を変える)
1<meta  name="apple-mobile-web-app-status-bar-style"  content="black"  />説明:

ウェブアプリにステータスバー(画面上部バー)の色を適用する.

のデフォルト値はdefault(白)で、ブラックとblack-translucent(灰色の半透明)に設定できます.

注意:「black-translucent」の値がページの位置を占め、ページの上に浮遊します.
6、name属性は作者の名前と連絡先を設定します.
1<meta  name="author"  contect="liudanyun, [email protected]"  />二、アップルWebアプリの他の設定:
もちろん、Web Appのiconと起動画面に合わせて、追加の両端コードを設定する必要があります.
1<link  rel="apple-touch-icon-precomposed"  href="iphone_logo.png"  />説明:このlinkはWeb Appのホーム画面上のiconファイルパスを設定します.
使用:

このパスは、ウェブサイトの文書のルートディレクトリの下に置くが、サーバの文書のルートディレクトリではないことに注意しなければならない.

ピクチャのサイズは57＊57(px)またはRetinaを114＊114(px)に設定でき、iPadのサイズは72＊72(px)

である.
1<link  rel="apple-touch-startup-image"  href="logo_startup.png"  />このlinkは起動時のインターフェースを設定します.
使用:

が置かれている経路は上記と同じです.

公式規定では、起動画面のサイズは320＊640(px)でなければならないということです.もともとはRetina画面は二倍に対応できると思っていましたが、サポートされていないので、画像が表示されません.

Web Appのこの2つのmetaについて詳細には理解できないものがあれば、公式解釈を見ることができます.
linkについては、さらに多くのパラメータ設定(例えば、iPod、iPad、iPhoneのサイズの違いアイコン)がありますが、公式の標準文を見ることができます.