デスクトップ プラットフォームの Web レイアウトのメタ タグは誰もがよく知っています。これは常にヘッド要素内にあります。SEO に携わる友人はメタに対して特別な感覚を持っているはずです。今日はモバイル プラットフォームのメタ タグについてお話します。メタ タグはモバイル プラットフォームにどのような魔法のような効果をもたらすのでしょうか。 1. メタビューポート モバイル プラットフォームのメタ タグに関しては、ビューポートについて話す必要があります。では、ビューポートとは何でしょうか? コードをコピー コードは次のとおりです。<!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 ピクセル) これらのプロパティについては、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 は、番号をダイヤルアップリンクに変換することを無効にします。 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' が見つかりません
1. HTML ヘッダーにビューポート タグを追加します。ウェブサイトの HTML ファイルの先頭...
MySQLをインストールする6つの手順(インストールパッケージのみがインストール場所を選択できます)...
HTML に CSS を追加するにはどうすればいいですか? HTML で CSS を設定する方法は ...
01. コマンドの概要md5sum - MD5検証コードを計算して検証するmd5sum コマンドは、...
この記事では、キャンバスとjsを使用して簡単な飛行機戦争を実装する方法を参考までに紹介します。具体的...
float の使用例左サスペンション: float:left;右サスペンション: float:rig...
序文MySQL のマスター/スレーブ レプリケーション関係は、厳密には「同期」または「マスター/スレ...
js 実行字句解析フェーズ: 形式パラメータ解析、変数宣言解析、関数宣言解析の 3 つの部分が含まれ...
Dockerネットワークを見るdocker ネットワーク ls [root@master ~]# d...
背景ファイルの作成時刻を取得する必要がある場合があります。例えば: 「xtrabackup スキーマ...
フォーマットエンコーディング1. ページの幅は600~800px、長さは1024px以内に設定してく...
昨日 HTML を少し学んだばかりで、JD.com の検索バーを作るのが待ちきれませんでした。 作っ...
ルートを追加するコマンド: 1.ルート追加route add -net 192.56.76.0 ne...
selinux ( Security-Enhanced Linux)は、Linux カーネル モジュ...
この記事の例では、商品検索機能を実現するためのJavaScriptの具体的なコードを参考までに共有し...