Jeder kennt das Meta-Tag im Weblayout von Desktop-Plattformen. Es befindet sich immer im Kopfelement. Freunde, die SEO betreiben, müssen ein besonderes Gespür für Meta haben. Heute sprechen wir über das Meta-Tag der mobilen Plattform. Welche magischen Effekte hat das Meta-Tag auf der mobilen Plattform? 1. Meta-Ansichtsfenster Wenn es um Meta-Tags für mobile Plattformen geht, müssen wir über das Ansichtsfenster sprechen. Was ist also ein Ansichtsfenster? Code kopieren Der Code lautet wie folgt:<!DOCTYPE html> <html> <Kopf> <meta charset="utf-8"> <title>Meta-Ansichtsfenster</title> <style type="text/css"> div, Körper { Polsterung: 0; Rand: 0; } Körper{ Polsterung oben: 100px; Farbe: #fff; } div{ Breite: 320px; Höhe: 100px; Rand: 0 automatisch; Hintergrund: #000; Textausrichtung: zentriert; Schriftart: 30px/100px Arial; } </Stil> </Kopf> <Text> <div> AppUE </div> </body> </html> Dazu müssen wir das Ansichtsfenster ändern und folgende Eigenschaftswerte festlegen: Breite: die Breite des Ansichtsfensters (Bereich von 200 bis 10.000, Standard ist 980 Pixel) Für diese Eigenschaften können wir eine oder mehrere festlegen. Sie müssen sie nicht alle gleichzeitig festlegen. Das iPhone berechnet andere Eigenschaftswerte automatisch basierend auf den von Ihnen festgelegten Eigenschaften, anstatt direkt die Standardwerte zu verwenden. Wenn Sie initial-scale=1 festlegen, betragen die Breite und Höhe im Hochformat automatisch 320*356 (nicht 320*480, da die Adressleiste usw. Platz beansprucht) und im Querformat 480*208. Wenn Sie nur die Breite festlegen, werden der Anfangsmaßstab und die Höhe automatisch abgeleitet. Wenn Sie beispielsweise die Breite auf 320 festlegen, beträgt der Anfangsmaßstab im Hochformat 1 und im Querformat 1,5. Wie teilen Sie Safari diese Einstellungen mit? Eigentlich ist es ganz einfach, nur eine Meta-Angabe wie etwa: Code kopieren Der Code lautet wie folgt:<meta name=”viewport” content=”width=Gerätebreite; Anfangsmaßstab=1,0; Maximalmaßstab=1,0; benutzerskalierbar=0;” /> Okay, jetzt können wir unsere Seite im Vollbildmodus gestalten, Sie müssen sich keine Sorgen machen, dass die Seite sehr klein angezeigt wird! 2. Metaformat-Erkennung Code kopieren Der Code lautet wie folgt:<meta name=”format-detection” content=”telefon=nein” /> Sie haben offensichtlich eine Zahlenfolge geschrieben, ohne einen Linkstil hinzuzufügen, aber das iPhone fügt Ihrem Text automatisch einen Linkstil hinzu und wählt automatisch, wenn Sie auf die Nummer klicken! Wie entferne ich diesen DFÜ-Link? Jetzt kommt unser Meta ins Spiel. Der Code lautet wie folgt: telephone=no deaktiviert die Umwandlung von Rufnummern in DFÜ-Links! 3. Meta: Apple-Mobile-Web-App-fähig Code kopieren Der Code lautet wie folgt:<meta name=”apple-mobile-web-app-fähig” content=”ja” /> Der Zweck dieser Metadaten besteht darin, die standardmäßige Apple-Symbolleiste und Menüleiste zu löschen. content hat zwei Werte: „yes“ und „no“. Wenn wir die Symbolleiste und die Menüleiste anzeigen müssen, müssen wir diese Metadatenzeile nicht hinzufügen. Sie wird standardmäßig angezeigt. 4. Meta Apple-Mobile-Web-App-Statusleisten-Stil Code kopieren Der Code lautet wie folgt:<meta name=”apple-mobile-web-app-status-bar-style” content=”default” /> <meta name=”apple-mobile-web-app-status-bar-style” content=”schwarz” /> <meta name=”apple-mobile-web-app-status-bar-style” content=”schwarz-durchscheinend” /> Seine Funktion besteht darin, den Anzeigestil der Statusleiste zu steuern Code kopieren Der Code lautet wie folgt:Statusleisten-Stil: schwarz Statusleistenstil: schwarz-durchscheinend |
<<: Lösung für den Vue3.0-Fehler: Modul „worker_threads“ kann nicht gefunden werden
>>: Hallo – Erfahrungsaustausch zum Entwurf von Dialogfeldern
GitHub bietet alle möglichen magischen Tools. Heu...
Der experimentelle Code lautet wie folgt: </hea...
GitHub-Adresse, Sie können es mit einem Stern mar...
vue-router hat zwei Modi Hash-Modus Verlaufsmodus...
Zeichensatzfehler treten immer auf Gebietsschema:...
nginx Übersicht nginx ist ein kostenloser, quello...
Benutzertabelle, ID-Nummer muss eindeutig sein, M...
Konfigurieren Sie den Beschleuniger für den Docke...
Das Herunterladen dieser Datenbank nimmt viel Zei...
Effektanzeige: Controllerknoten zur Umgebungsvorb...
Zum Übertragen von Dateien zwischen dem Host und ...
Es gibt häufig Szenarien, in denen das Bild an di...
In diesem Artikelbeispiel wird der spezifische Co...
Inhaltsverzeichnis Prototypenkette Wir können ein...
Vorwort: Lynis ist ein Sicherheitsprüfungs- und H...