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

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:

<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!
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:

<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

Artikel empfehlen

Kommentare auf Webseiten verursachen Textüberlauf im Internet Explorer

Der experimentelle Code lautet wie folgt: </hea...

Implementierung des Wasserfall-Layouts im Uni-App-Projekt

GitHub-Adresse, Sie können es mit einem Stern mar...

Der Unterschied zwischen Hash-Modus und Verlaufsmodus im Vue-Router

vue-router hat zwei Modi Hash-Modus Verlaufsmodus...

So lösen Sie das Zeichensatzproblem bei der Anmeldung bei Linux

Zeichensatzfehler treten immer auf Gebietsschema:...

Verwandte Befehle zur vollständigen Deinstallation von Nginx unter Ubuntu 16.04

nginx Übersicht nginx ist ein kostenloser, quello...

MySQL implementiert den Vorgang zum Festlegen mehrerer Primärschlüssel

Benutzertabelle, ID-Nummer muss eindeutig sein, M...

So ändern Sie die inländische Imagequelle für Docker

Konfigurieren Sie den Beschleuniger für den Docke...

So übertragen Sie Dateien zwischen Docker-Container und lokalem Computer

Zum Übertragen von Dateien zwischen dem Host und ...

Beispielcode zur Implementierung eines bildadaptiven Containers mit CSS

Es gibt häufig Szenarien, in denen das Bild an di...

Vue implementiert eine kleine Notizblockfunktion

In diesem Artikelbeispiel wird der spezifische Co...

Zusammenfassung und Praxis des Javascript-Prototyp-Kettendiagramms

Inhaltsverzeichnis Prototypenkette Wir können ein...

Analyse der Verwendung des Linux-Schwachstellen-Scan-Tools lynis

Vorwort: Lynis ist ein Sicherheitsprüfungs- und H...