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

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

デスクトップ プラットフォームの 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ダイアログボックスのデザイン体験の共有

推薦する

MacにMySQLをインストールするときに忘れたパスワードを変更する方法

1. MacにMySQLデータベースをインストールする1. MySQLデータベースをダウンロードする...

親コンテナの CSS 均等分割 (完全三分の一) の実装

親コンテナの幅は固定されています。子要素が親の幅を均等に分割するには、どのような方法がありますか?コ...

MySQL が my.cnf を読み込む順序の詳細

目次MySQLがmy.cnfを読み込む順序1. mysql.server の起動方法2. mysql...

Docker デプロイメント Springboot プロジェクト例の分析

この記事は主に、docker デプロイメント springboot プロジェクトのサンプル分析を紹介...

Vueモバイル端末は左スライド編集と削除の全プロセスを実現します

序文プロジェクトのニーズに応じて、Vue-touch を使用して、vue モバイル端末の左スワイプ編...

ウェブサイトのパフォーマンス: 画像とCookieの最適化、モバイルアプリケーションの最適化

前のセクションでは、コンテンツ、サーバー、JavaScript、CSS など、Web サイトのパフォ...

ウェブサイトをより高く、よりデザイン的に見せる方法

「ウェブサイトを高級感のあるものにするにはどうすればいいでしょうか? それともデザイン重視にすればい...

vue3 プロジェクトを素早く構築し、関連機能を紹介する vite+ts の詳細な説明

目次ヴィテ建てる構成vite.config.tsルーターtsタイプvue3 の知識設定小道具コンテク...

Windows 10 インストール vmware14 チュートリアル図

ソフトウェアのダウンロードソフトウェアのダウンロード リンク: https://pan.baidu....

iframe に関するいくつかの発見と考察

この物語は、今日の予期せぬ発見から始まります。同社には複数のウェブサイトがある。友達リンクにはお互い...

MySQLオンラインデッドロック分析練習

序文MySQL を学習する際に、MySQL のロック メカニズムについて簡単に理解したことがあると思...

PHPのmail()関数を使用してメールを送信する

PHPのメール関数を使用してメールを送信するmail()関数はメールサーバーに接続し、サーバーと対話...

SSH ポート転送、ローカル ポート転送、リモート ポート転送、動的ポート転送の詳細

パート 1 SSH ポート転送の概要カフェで無料Wi-Fiを利用しているとき、誰かがあなたのパスワー...

CSS3 で実装された画像ホバートグルボタン

結果:実装コードhtml <ul class="スライド"> <...

CSS でリスト スタイル属性を設定する方法 (この記事を読むだけ)

リストスタイルのプロパティHTMLには、順序なしリストと順序ありリストの2種類のリストがあります。仕...