Dieser Artikel stellt hauptsächlich die detaillierte Anwendung von Meta-Tags in der Entwicklung mobiler Plattformen vor.
Jeder ist mit dem Meta-Tag im Web-Layout der Desktop-Plattform bestens vertraut Innerhalb des Head-Elements müssen SEO-Freunde ein besonderes Gespür für Meta haben. Heute werden wir über das Meta-Tag der mobilen Plattform sprechen. Welche magischen Auswirkungen hat das Meta-Tag auf der mobilen Plattform?
1. Meta-Ansichtsfenster
Apropos Meta-Tags für mobile Plattformen: Was ist das Ansichtsfenster?
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? Werfen wir einen Blick auf die Anzeige des folgenden Layouts auf dem iPhone
Der Code lautet wie folgt:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Meta Viewport</title>
<style type="text/css">
p,body{
padding:0;
margin:0;
}
body{
padding-top:100px;
color:#fff;
}
p{
width:320px;
height:100px;
margin:0 auto;
background:#000;
text-align:center;
font:30px/100px Arial;
}
</style>
</head>
<body>
<p>
AppUE
</p>
</body>
</html>Wir müssen also das Ansichtsfenster ändern, und wir haben Folgendes Zu setzende Attributwerte:
Breite: Breite des Ansichtsfensters (Bereich von 200 bis 10.000, Standard ist 980 Pixel)
Höhe: Höhe des Ansichtsfensters (Bereich von 223 bis 10.000)
Anfangsskalierung: Anfangsskalierung (Bereiche von >0 bis 10)
Minimalskala: Die minimale Skalierung, auf die der Benutzer zoomen darf
Maximale Skalierung: Die maximale Skalierung, auf die der Benutzer zoomen darf
Benutzerskalierbar: Ob der Benutzer manuell zoomen kann
Für diese Attribute können wir eines oder mehrere davon festlegen. Sie müssen nicht alle gleichzeitig festlegen. Das iPhone berechnet automatisch andere Attribute Werte basierend auf den von Ihnen festgelegten Attributen, anstatt direkt die Standardwerte 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 Modus. 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:
Der Code lautet wie folgt:
<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” />
Okay, wir können unsere Seite im Vollbildmodus gestalten. Sie müssen sich keine Sorgen mehr um die Seitenanzeige machen. Sehr klein!
2. Die Formaterkennung von Meta
Der Code lautet wie folgt:
<meta name=”format-detection” content=”telephone=no” />
Sie haben eindeutig eine Zahlenfolge geschrieben, ohne sie hinzuzufügen einen Linkstil, aber das iPhone fügt Ihrem Text automatisch einen Linkstil hinzu und klicken Sie auf die Nummer, um die Nummer automatisch zu wählen! Wie entferne ich diesen DFÜ-Link? Zu diesem Zeitpunkt sollte unser Meta erneut seine magische Kraft zeigen. 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
Der Code lautet wie folgt:
<meta name=”apple-mobile-web-app-capable” content=”yes” />
Die Funktion davon Meta besteht darin, die standardmäßige 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. Metas Apple-Mobile-Web-App-Statusleistenstil
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=”black” /> <meta name=”apple-mobile-web-app-status-bar-style” content=”black-translucent” />
Die Funktion besteht darin, den Anzeigestil der Statusleiste zu steuern
Der Code lautet wie folgt:
status-bar-style:black status-bar-style:black-translucent
Weitere Beispiele für die Anwendung von Meta-Tags auf mobilen Plattformen Entwicklung, achten Sie bitte auf die chinesische PHP-Website für verwandte Artikel!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
