回転:移動プラットフォームのmetaラベルの定義

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

ドキュメントとデバイスの幅を1:1に保つように強制します.

ドキュメントの最大幅比列は1.0(initial-scale初期スケール値とmaximum-scale最大スケール値)です.

user-scalableは、ユーザが手動でスケーリングできるかどうかを定義し(noはスケーリングしない)、ページ固定装置の上のサイズを定義する.

注意:実際のテストでは、アンドロイドシステムに付属するブラウザの中には、このルールがサポートされていないものもあり、ページを拡大することができ、拡大応答のboxも拡大すると、ページにエラーが発生し、解決方法:ページの最小幅を定義する
1
2
3body {    min-width: 320px;}3、name属性のformat-detection値(ページの数字を無視して電話番号と認識)
1<metaname="format-detection"content="telephone=no"/>説明:

デバイスがWebページを閲覧するときに数字に対して電話機能を有効にしない(デバイスによって解釈が異なり、iTouchは数字をクリックして連絡先に保存し、iPhoneは電話をかける)、ページの数字を電話番号と認識することを無視する.

電話機能を有効にする必要がある場合はtelephone=yesで、ページにGoogle Mapsがある場合はiTunesとYouTubeのリンクがiosデバイス上で対応するプログラムコンポーネントを開きます.

4、name属性のapple-mobile-web-app-capable値(ウェブサイトがweb appプログラムのサポートを開く)
1<metaname="apple-mobile-web-app-capable"content="yes"/>説明:

Webサイトは、Web appプログラムのサポートを開始します.

このmetaは、「アップルデバイスwebアプリケーションxx」という内容であることがわかります.つまり、このmetaはwebアプリケーションを専門に定義しているということです.

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

Web appアプリケーションの下でステータスバー(画面上部バー)の色.

のデフォルト値はdefault(白)で、black(黒)とblack-translucent(灰色の半透明)とすることができます.

注意:「black-translucent」の値がページの位置を占め、ページの上に浮かぶ(ページ20 pxの高さiphone 4とitouch 4を上書きするRetina画面は40 px).
6、name属性は作者の名前と連絡先を設定する
1<metaname="author"contect="liudanyun, [email protected]"/>二、アップルWeb Appその他の設定:
もちろん、Web Appのiconと起動インタフェースに合わせて追加の両端コードを設定する必要があります.以下に示します.
1<linkrel="apple-touch-icon-precomposed"href="iphone_logo.png"/>説明:このlinkは、Web Appの配置メイン画面上のiconファイルパス(画像4)を設定します.
使用:

このパスは、ウェブサイトのドキュメントのルートディレクトリの下に配置されるが、サーバではないドキュメントのルートディレクトリに配置されることに注意してください.

ピクチャサイズは57*57(px)またはRetinaは114*114(px)、iPadサイズは72*72(px)

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

のパスは上と同じです.

公式に起動インタフェースのサイズは320*640(px)でなければならないと規定されており、Retina画面は2倍に対応できると思っていたが、サポートされず、画像が表示されなかった.

Web Appの2つのmetaについてまだ詳しく理解できない場合は、公式の説明を参照してください:Meta Tags
linkについては、iPod、iPad、iPhoneの異なるサイズの異なるアイコンなど、より多くのパラメータ設定があり、公式標準ドキュメント:Configuring Web Applicationsを参照できます.