Der magische Effekt mobiler HTML5-Meta-Tag_HTML5-Tutorialfähigkeiten

Bei der Erstellung einer mobilen Website kommt es neben der Einfachheit der Seite und der einfachen Bedienung usw., die Besucher sehen können, auch auf die Einstellung von Meta-Tags an. Die richtige Einstellung von Meta-Tags verbessert die Suchmaschinenoptimierung des Mobilgeräts Website und die Darstellung mobiler Browser sind sehr hilfreich. Jeder kennt das Meta-Tag im Web-Layout der Desktop-Plattform. Es befindet sich immer im Head-Element. Freunde, die SEO betreiben, müssen ein besonderes Gespür für Meta haben . Welche magischen Auswirkungen haben Meta-Tags auf mobilen Plattformen?
1. Viewport of Meta
Wenn es um Meta-Tags für mobile Plattformen geht, müssen wir über Viewport sprechen.
Ansichtsfenster ist der visuelle Bereich, der zum Anzeigen von Webseiten verwendet wird, nachdem alle Symbolleisten, Statusleisten, Bildlaufleisten usw. entfernt wurden.
Bei herkömmlichen WEB-Seiten ist es normal, dass sie auf dem iPhone mit einer Breite von 980 angezeigt werden, und sie füllen auch den Bildschirm aus. Bei Web-Apps kann dies jedoch ein kleines Problem sein. Auf iPhones haben unsere Web-Apps normalerweise eine Breite von 100 cm im Hochformat. Welchen Effekt hat unsere 320-Seiten-Anzeige auf dem iPhone? Manche Leute denken vielleicht, dass das iPhone nicht 320 mm breit ist, sondern den Bildschirm ausfüllen sollte, oder? Schauen wir uns an, wie das folgende Layout auf dem iPhone aussieht

Kopieren Sie den Code

Der Code lautet wie folgt:

Meta Viewport> ;

Wir müssen also das Ansichtsfenster ändern. Wir haben die folgenden Attributwerte, die festgelegt werden können:

width: die Breite des Ansichtsfensters (im Bereich von 200 bis 10.000, der Standardwert ist 980 Pixel)
Höhe: die Höhe des Ansichtsfensters (im Bereich von 223 bis 10.000)
Anfangsskalierung: anfängliche Skalierung (im Bereich von >0 bis 10)
Minimum-Skalierung: die minimale Skalierung, die der Benutzer zoomen darf bis
maximum-scale: der maximale Maßstab, auf den der Benutzer zoomen darf
user-scalable: Ob der Benutzer manuell zoomen kann
Für diese Attribute können wir eines oder mehrere davon festlegen. Sie tun dies nicht Sie müssen sie alle gleichzeitig festlegen. Das iPhone berechnet automatisch andere Attributwerte basierend auf den von Ihnen festgelegten Attributen, anstatt einfach den Standardwert zu verwenden.
Wenn Sie „initial-scale=1“ festlegen, betragen Breite und Höhe automatisch 320*356 im Hochformat (nicht 320*480, da die Adressleiste usw. alle Platz beanspruchen) und 480*208 im Querformat. Wenn Sie nur die Breite festlegen, werden der Anfangsmaßstab und die Höhe automatisch berechnet. Wenn Sie beispielsweise die Breite auf 320 festlegen, beträgt die Anfangsskalierung 1, wenn sich der Bildschirm im Hochformat befindet, und beträgt 1,5, wenn der Bildschirm im Querformat ist. Wie informieren diese Einstellungen Safari darüber? Tatsächlich ist es sehr einfach, nur ein Meta, in der Form:




Kopieren Sie den Code
Der Code ist wie folgt folgt:





Okay, wir können unsere Seite im Vollbildmodus gestalten und müssen uns keine Sorgen mehr machen, dass die Seite sehr klein angezeigt wird!

2. Metaformat-Erkennung

Code kopieren

Der Code lautet wie folgt:

Sie haben eindeutig eine Zahlenfolge geschrieben, ohne einen Linkstil hinzuzufügen, aber das iPhone fügt Ihrem Text automatisch einen Linkstil hinzu, und wenn Sie auf die Nummer klicken, wird die Nummer automatisch gewählt! Wie entferne ich diesen DFÜ-Link? Zu diesem Zeitpunkt sollte unser Meta erneut seine Magie entfalten. Der Code lautet wie folgt:
telephone=no verbietet die Umwandlung von Nummern in DFÜ-Links!
telephone=yes ermöglicht die Konvertierung von Nummern in DFÜ-Links. Um die Konvertierungsfunktion zu aktivieren, ist es nicht erforderlich, dieses Meta zu schreiben. Es ist standardmäßig aktiviert.

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

Die Funktion dieses Metas besteht darin, die Standard-Apple-Symbolleiste und Menüleiste zu löschen. Der Inhalt hat zwei Werte: „Ja“ und „Nein“. Wenn wir die Symbolleiste und die Menüleiste anzeigen müssen, ist es nicht erforderlich, diese Metazeile hinzuzufügen.
4. Meta des Apple-Mobile-Web-App-Statusleistenstils

Kopieren Sie den Code

Der Code lautet wie folgt:

-app-status -bar-style“ content=“black-translucent“ />
Die Funktion besteht darin, den Anzeigestil der Statusleiste zu steuern

Kopieren Sie den Code

Der Code lautet wie folgt:status-bar-style:black

status-bar-style:black-translucent

Heute werde ich kurz darüber sprechen, welche Meta-Tags benötigt werden zur mobilen Version der Website hinzugefügt werden:

Ansichtsfenster
Ansichtsfenster ist fast ein anerkannter Standard. Es wurde ursprünglich von Apple für die mobile Version erstellt Safari auf dem iPhone. Aufgrund des großen Verkaufsschlagers wird es von den meisten anderen mobilen Browsern akzeptiert, z. B. Opera Mobile, iPhone, Android, Iris, IE, BlackBerry, Obigo, Firefox. Das einfachste Beispiel ist die Darstellung der gesamten Bildschirmbreite auf dem Handy:



Code kopieren

Der Code lautet wie folgt:

HandheldFriendly

Dieses Label und das MobileOptimized Im Folgenden werden De-facto-Labels im Feature-Machine-Zeitalter vorgestellt. Das

HandheldFriendly-Tag wurde zunächst zum Markieren mobiler Inhalte beim AvantGo-Browsing verwendet und entwickelte sich später zu einem universellen Standard zum Markieren mobiler Websites. Die Unterstützung dieses Tags ist jedoch unbekannt.



Code kopieren

Der Code lautet wie folgt:

MobileOptimized

Dies ist ein Windows-spezifisches Meta-Tag, das schließlich zu einer weiteren Methode zur Identifizierung mobiler Inhalte wurde. Der Nachteil dieses Tags besteht jedoch darin, dass es eine bestimmte Breite haben muss angegeben werden, und auch hier ist die Unterstützung dieses Tags unbekannt:


Kopieren Sie den Code

Der Code lautet wie folgt: