モバイルプラットフォーム開発におけるメタタグの適用の詳細な説明

モバイルプラットフォーム開発におけるメタタグの適用の詳細な説明

デスクトップ プラットフォームの Web レイアウトのメタ タグは誰もがよく知っています。これは常にヘッド要素内にあります。SEO に携わる友人はメタに対して特別な感覚を持っているはずです。今日はモバイル プラットフォームのメタ タグについてお話します。メタ タグはモバイル プラットフォームにどのような魔法のような効果をもたらすのでしょうか。

1. メタビューポート

モバイル プラットフォームのメタ タグに関しては、ビューポートについて話す必要があります。では、ビューポートとは何でしょうか?
ビューポートは表示領域です。デスクトップ ブラウザーの場合、ビューポートは、ツールバー、ステータス バー、スクロール バーなどをすべて削除した後、Web ページを表示するために使用される領域を指します。従来の WEB ページの場合、幅 980 は標準で、iPhone で表示すると画面全体に表示されます。ただし、Web アプリの場合、これは問題になることがあります。iPhone では、Web アプリは通常、縦方向で幅 320 です。では、幅 320 のページは iPhone ではどのように表示されるのでしょうか。 iPhone の幅は 320 ではなく、画面全体を埋め尽くすような感じだと思う人もいるかもしれませんが、それは本当でしょうか? iPhoneに表示される次のレイアウトを見てみましょう

コードをコピー
コードは次のとおりです。

<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="utf-8">
<title>メタビューポート</title>
<スタイル タイプ="text/css">
div,本文{
パディング:0;
マージン:0;
}
体{
パディング上部:100px;
色:#fff;
}
div{
幅:320ピクセル;
高さ:100px;
マージン:0 自動;
背景:#000;
テキスト配置:中央;
フォント:30px/100px Arial;
}
</スタイル>
</head>
<本文>
<div>
アプリ
</div>
</本文>
</html>

したがって、ビューポートを変更する必要があり、次のプロパティ値を設定する必要があります。

width: ビューポートの幅 (範囲は 200 から 10,000 ピクセル、デフォルトは 980 ピクセル)
高さ: ビューポートの高さ (範囲: 223 ~ 10,000)
initial-scale: 初期スケール (範囲: >0 から 10)
minimum-scale: ユーザーがズームできる最小スケール
最大スケール: ユーザーがズームできる最大スケール
ユーザースケーラブル: ユーザーが手動でスケールできるかどうか

これらのプロパティについては、1 つまたは複数のプロパティを設定できます。すべてを同時に設定する必要はありません。iPhone は、デフォルト値を直接使用するのではなく、設定したプロパティに基づいて他のプロパティ値を自動的に計算します。

initial-scale=1 に設定すると、縦向きモードでは幅と高さが自動的に 320*356 (アドレスバーなどがスペースを占めるため 320*480 ではありません)、横向きモードでは 480*208 になります。同様に、幅のみを設定すると、初期スケールと高さは自動的に推測されます。たとえば、width=320 に設定すると、ポートレートモードでは initial-scale は 1 になり、ランドスケープモードでは 1.5 になります。 では、Safari にこれらの設定を知らせるにはどうすればよいでしょうか?実際のところ、それは非常に単純で、次のようなメタだけです。


コードをコピー
コードは次のとおりです。

<meta name=”viewport” content=”width=デバイス幅; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” />

さて、これでページを全画面でレイアウトできるようになりました。ページが非常に小さく表示されることを心配する必要はありません。

2. メタフォーマット検出

コードをコピー
コードは次のとおりです。

<meta name=”format-detection” content=”telephone=no” />

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

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

3. メタ: apple-mobile-web-app-capable

コードをコピー
コードは次のとおりです。

<meta name=”apple-mobile-web-app-capable” content=”yes” />

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

4. メタ アップル モバイル ウェブ アプリ ステータス バー スタイル

コードをコピー
コードは次のとおりです。

<meta name=”apple-mobile-web-app-status-bar-style” content=”default” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black-translucent” />

その機能はステータスバーの表示スタイルを制御することです

コードをコピー
コードは次のとおりです。

ステータスバースタイル:黒
ステータスバースタイル:黒半透明

<<:  Vue3.0 エラーの解決策: モジュール 'worker_threads' が見つかりません

>>:  Helloダイアログボックスのデザイン体験の共有

推薦する

アダプティブ Web デザインの手法 (モバイル フォンでの優れたアクセス エクスペリエンス)

1. HTML ヘッダーにビューポート タグを追加します。ウェブサイトの HTML ファイルの先頭...

MySQL 8.0.21 無料インストール版 設定方法 グラフィックチュートリアル

MySQLをインストールする6つの手順(インストールパッケージのみがインストール場所を選択できます)...

CSSリンクと@importの違いの詳細な説明

HTML に CSS を追加するにはどうすればいいですか? HTML で CSS を設定する方法は ...

Linux md5sumコマンドの使い方

01. コマンドの概要md5sum - MD5検証コードを計算して検証するmd5sum コマンドは、...

航空機戦争ゲームを実装するためのJavaScript

この記事では、キャンバスとjsを使用して簡単な飛行機戦争を実装する方法を参考までに紹介します。具体的...

HTMLフロートの使用法の簡単な分析

float の使用例左サスペンション: float:left;右サスペンション: float:rig...

MySQL遅延スレーブを導入するメリットのまとめ

序文MySQL のマスター/スレーブ レプリケーション関係は、厳密には「同期」または「マスター/スレ...

JavaScript における変数と関数の昇格の詳細な例

js 実行字句解析フェーズ: 形式パラメータ解析、変数宣言解析、関数宣言解析の 3 つの部分が含まれ...

dockerネットワーク双方向接続の詳細な説明

Dockerネットワークを見るdocker ネットワーク ls [root@master ~]# d...

Linux でファイルの作成時間を取得する方法と実践的なチュートリアル

背景ファイルの作成時刻を取得する必要がある場合があります。例えば: 「xtrabackup スキーマ...

EDMをHTMLで記述する際の注意点まとめ(メール送信時の一般的な注意点)

フォーマットエンコーディング1. ページの幅は600~800px、長さは1024px以内に設定してく...

HTML での位置の使用に関する簡単な紹介

昨日 HTML を少し学んだばかりで、JD.com の検索バーを作るのが待ちきれませんでした。 作っ...

Linux で静的ルーティングを追加するための 2 つの実装方法の分析

ルートを追加するコマンド: 1.ルート追加route add -net 192.56.76.0 ne...

Linuxにおけるselinuxの基本設定チュートリアルの詳細な説明

selinux ( Security-Enhanced Linux)は、Linux カーネル モジュ...

商品クエリ機能を実現するJavaScript

この記事の例では、商品検索機能を実現するためのJavaScriptの具体的なコードを参考までに共有し...