デスクトップ プラットフォームの 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. MacにMySQLデータベースをインストールする1. MySQLデータベースをダウンロードする...
親コンテナの幅は固定されています。子要素が親の幅を均等に分割するには、どのような方法がありますか?コ...
目次MySQLがmy.cnfを読み込む順序1. mysql.server の起動方法2. mysql...
この記事は主に、docker デプロイメント springboot プロジェクトのサンプル分析を紹介...
序文プロジェクトのニーズに応じて、Vue-touch を使用して、vue モバイル端末の左スワイプ編...
前のセクションでは、コンテンツ、サーバー、JavaScript、CSS など、Web サイトのパフォ...
「ウェブサイトを高級感のあるものにするにはどうすればいいでしょうか? それともデザイン重視にすればい...
目次ヴィテ建てる構成vite.config.tsルーターtsタイプvue3 の知識設定小道具コンテク...
ソフトウェアのダウンロードソフトウェアのダウンロード リンク: https://pan.baidu....
この物語は、今日の予期せぬ発見から始まります。同社には複数のウェブサイトがある。友達リンクにはお互い...
序文MySQL を学習する際に、MySQL のロック メカニズムについて簡単に理解したことがあると思...
PHPのメール関数を使用してメールを送信するmail()関数はメールサーバーに接続し、サーバーと対話...
パート 1 SSH ポート転送の概要カフェで無料Wi-Fiを利用しているとき、誰かがあなたのパスワー...
結果:実装コードhtml <ul class="スライド"> <...
リストスタイルのプロパティHTMLには、順序なしリストと順序ありリストの2種類のリストがあります。仕...