Detaillierte Erläuterung der Anwendung von Meta-Tags bei der Entwicklung mobiler Plattformen

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?
Der Ansichtsbereich ist der sichtbare Bereich. Bei Desktop-Browsern bezieht sich der Ansichtsbereich auf den Bereich, der zum Anzeigen von Webseiten verwendet wird, nachdem alle Symbolleisten, Statusleisten, Bildlaufleisten usw. entfernt wurden. Für herkömmliche WEB-Seiten ist eine Breite von 980 normal und füllt den gesamten Bildschirm aus, wenn sie auf einem iPhone angezeigt werden. Für Web-Apps kann dies jedoch ein Problem darstellen. Auf iPhones sind unsere Web-Apps in vertikaler Ausrichtung normalerweise 320 breit. Wie sieht also unsere 320 breite Seite auf einem iPhone aus? Manche Leute denken vielleicht, dass die Breite des iPhone nicht 320 beträgt, sondern dass es sich anfühlt, als würde es den gesamten Bildschirm ausfüllen, aber stimmt das? Schauen wir uns das folgende Layout auf dem iPhone an

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)
Höhe: die Höhe des Ansichtsfensters (Bereich von 223 bis 10.000)
initial-scale: anfängliche Skala (Bereich von >0 bis 10)
minimum-scale: Der Mindestmaßstab, auf den der Benutzer zoomen darf
maximum-scale: Der maximale Maßstab, bis zu dem der Benutzer zoomen darf
user-scalable: Ob der Benutzer manuell skalieren kann

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:

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:

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!
Telephone=yes aktiviert die Konvertierung von Nummern in DFÜ-Links. Um die Konvertierungsfunktion zu aktivieren, müssen Sie diese Metadaten nicht schreiben. Sie sind standardmäßig aktiviert!

3. Meta: Apple-Mobile-Web-App-fähig

Code kopieren

Der Code lautet wie folgt:

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:

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