HTML でのメタタグと使用法の詳細な説明

これ以上無駄話をして時間を無駄にしないので、今日の話題を始めましょう。

HTML のメタタグ

1. メタタグの意味

<meta> 要素は、検索エンジン向けの説明やキーワード、更新頻度など、ページに関するメタ情報を提供します。

<meta> タグはドキュメントの先頭に配置され、コンテンツは含まれません。

<meta> タグの属性は、ドキュメントに関連付けられた名前と値のペアを定義します。

2. メタの共通属性

1. 文字セット

説明: HTML ドキュメントの文字エンコーディングを指定します。

使用法: <meta charset="UTF-8">

2. ビューポート

説明: これはユーザーの Web ページの表示領域です。 ご存知のとおり、モバイル デバイスの画面は、一般的に PC の画面よりはるかに小さいです。Webkit ブラウザは、より大きな「仮想」ウィンドウをモバイル デバイスの画面にマッピングします。デフォルトの仮想ウィンドウの幅は 980 ピクセル (現在ほとんどの Web サイトの標準の幅) で、特定の比率 (3:1 または 2:1) に従って拡大縮小されます。

つまり、通常の Web ページを読み込む場合、Webkit はまずブラウザ標準の 980 ピクセルに従って Web ページを読み込み、次に幅を 490 ピクセルに縮小します。この縮小はグローバルな縮小、つまりページ上のすべての要素が縮小されることに注意してください。

使用法：

<meta id="viewport" name="viewport" content="width=デバイス幅; 初期スケール=1.0; 最大スケール=1; ユーザースケーラブル=いいえ;">

（１）幅

幅はビューポートのサイズを制御します。通常、適応表示のためにデバイス幅に設定されます。

（２）初期規模

initial-scale: 初期ズーム比、つまりページが初めて読み込まれたときのズーム比。

（３）最大規模

最大スケール 最大ズーム。これは許可される最大ズーム レベルです。これは、画面サイズと比較したページ サイズの最大乗数を示す浮動小数点値でもあります。

（４）最小規模

minimum-scale: ユーザーがズームできる最小スケール。使用方法は maximum-scale と同様です。

（５）ユーザースケーラブル

ユーザーによるスケーラブルなユーザーが調整可能なスケーリング。つまり、ユーザーがページのズーム レベルを変更できるかどうかです。 yes に設定すると、ユーザーは変更できるようになります。それ以外の場合は no になります。

3. キーワード

説明: 検索エンジンに提供されるキーワードのリスト。各キーワードは英語のカンマ「,」で区切られます。検索の品質を向上させるために検索エンジンが使用するキーワードを指定します。

使用方法: <Meta name="キーワード" Content="キーワード 1、キーワード 2、キーワード 3、キーワード 4、...">

4. 説明

説明: 説明は、検索エンジンに Web サイトの主なコンテンツを伝えるために使用されます。

使用方法：<Meta name="Description" Content="你網頁的簡述">

5. フォーマット検出

注: format-detection は HTML 内の一部の形式を検出するために使用されます。

使用方法: meta の format-detection 属性には主に次の設定があります。

 メタ名="フォーマット検出" コンテンツ="電話=いいえ"
    メタ名="フォーマット検出" コンテンツ="email=no"
    メタ名="フォーマット検出" コンテンツ="アドレス=いいえ"

次のように記述することもできます: meta name="format-detection" content="telephone=no,email=no,adress=no"


（１）電話

明らかにリンク スタイルを追加せずに数字の文字列を入力しましたが、iPhone はテキストにリンク スタイルを自動的に追加し、番号をクリックすると自動的にダイヤルします。このダイヤルアップリンクを削除するにはどうすればよいですか?ここで、メタが機能する時が来ました。コードは次のとおりです。

telephone=no は、番号をダイヤルアップリンクに変換することを無効にします。
Telephone=yes は、番号をダイヤルアップ リンクに変換する機能をオンにします。変換機能をオンにするには、このメタを記述する必要はありません。デフォルトでオンになっています。

（２）電子メール

クリック後にメールアドレスを認識せず、自動的に送信しないようにデバイスに指示します

email=no は電子メールアドレスとして許可されません。
email=yes は、テキストをデフォルトで電子メール アドレスにします。このメタを記述する必要はありません。デフォルトで有効になっています。

（３）住所

adress=noマップへのジャンプは禁止です!
adress=yes は、住所をクリックすると地図に直接ジャンプする機能をオンにします。デフォルトではオンになっています。

6. アップルタッチフルスクリーン

注意：ホーム画面に追加後は全画面で表示されます。

使用方法: <meta name="apple-touch-fullscreen" content="yes">

7. アップルのモバイルウェブアプリ対応

説明: この機能は、デフォルトの Apple ツールバーとメニュー バーを削除します。 content には、「yes」と「no」の 2 つの値があります。ツールバーとメニュー バーを表示する必要がある場合は、このメタ行を追加する必要はありません。これはデフォルトで表示されます。

使用方法: <meta name="apple-mobile-web-app-capable" content="yes" />

8. アプリ構成

説明: 履歴とアニメーション効果を保持

使用方法: <meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes"/>

9. msapplication-タップハイライト

説明: ハイライトなしでクリック（ハイライト）

使用法: <meta name="msapplication-tap-highlight" content="no">

要約する

上記は、HTML におけるメタ タグとその使用法の詳細な紹介です。お役に立てれば幸いです。ご質問がある場合は、メッセージを残していただければ、すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。