In der vorherigen Studie zum Front-End war das Verständnis von Meta-Tags nur dieser Satz.
<meta charset=UTF-8>
Wenn Sie jedoch eine Website öffnen, befindet sich im Head-Tag eine Spalte mit Meta-Tags. Wir haben zum Beispiel die VeVb-Kampfsport-Website, aber ich kenne sie nicht, deshalb habe ich das Meta-Tag vorne in den Studienplan eingefügt.
<meta name=viewport content=width=device-width, initial-scale=1.0, Maximum-scale=1.0, Minimum-scale=1.0, user-scalable=no>
Dies wird am häufigsten verwendet. Die Anweisungen für Breite und Höhe geben die logische Breite bzw. Höhe des Ansichtsfensters an. Ihr Wert ist entweder eine Zahl in Pixeln oder ein spezielles Markierungssymbol. Die width-Direktive verwendet das Tag „device-width“, um anzugeben, dass die Breite des Ansichtsfensters der Bildschirmbreite des Geräts entsprechen soll. In ähnlicher Weise verwendet die Height-Direktive das Flag „device-height“, um anzugeben, dass die Höhe des Ansichtsfensters der Bildschirmhöhe des Geräts entspricht.
Die user-scalable-Direktive gibt an, ob der Benutzer das Ansichtsfenster, also die Ansicht der Webseite, zoomen kann. Der Wert „Ja“ erlaubt dem Benutzer das Zoomen, der Wert „Nein“ verbietet das Zoomen.
Die Initial-Scale-Direktive wird verwendet, um die anfängliche Skalierung der Webseite festzulegen. Der standardmäßige anfängliche Skalierungswert variiert je nach Smartphone-Browser. Normalerweise rendert das Gerät die gesamte Webseite im Browser. Bei Einstellung auf 1,0 wird das unskalierte Webdokument angezeigt.
Die Anweisungen „Maximum-Scale“ und „Minimum-Scale“ werden verwendet, um die Grenze des Benutzers für das Zoomverhältnis der Webseite festzulegen. Die Werte liegen zwischen 0,25 und 10,0. Wie bei „initial-scale“ ist der Wert dieser Anweisungen die auf den Inhalt des Ansichtsfensters angewendete Skalierung.
Alle Smartphone-Browser unterstützen die Breiten- und Benutzerskalierungsanweisungen des ViewPort <meta>-Tags. Opera Mobile verwendet jedoch nicht die User-Scalable-Anweisung, sondern argumentiert stattdessen, dass Benutzer immer die Möglichkeit behalten sollten, Webseiten in mobilen Browsern zu zoomen.
Das Folgende wird wirklich selten verwendet. devicePixelRatiowindow.devicePixelRatio ist das Verhältnis von physischen Pixeln zu geräteunabhängigen Pixeln (Dips) auf dem Gerät. Der Formelausdruck lautet: window.devicePixelRatio = physische Pixel/Einbrüche
Adaptiver Bildschirm für eine an den Bildschirm angepasste WebsiteWenn der Wert des Inhalts kleiner oder gleich der Bildschirmbreite ist, wird die adaptive Bildschirmanpassung der Website deaktiviert. Die Website wird nicht mit der Browserausdehnung skaliert.
Wenn der Inhaltswert größer als die Bildschirmbreite ist, wird die Anpassung an den Bildschirm aktiviert
Bezogen auf den Apple-Browser08.07.2015
<meta name=viewport content=minimal-ui>
In Safari unter iOS 7.1 wird das Attribut minimal-ui zum Meta-Tag hinzugefügt, sodass die obere Adressleiste und die untere Navigationsleiste beim Laden der Webseite ausgeblendet werden können.
<meta name=apple-mobile-web-app-capable content=yes>
Ob die Webapp-Funktion aktiviert werden soll, ist auf „Ja“ eingestellt. Die Website löscht die standardmäßige Apple-Symbolleiste und Menüleiste im Vollbildmodus.
<meta name=apple-touch-fullscreen content=yes>
Aktivieren Sie die Unterstützung für Web-App-Programme
<meta name=format-detection content=telephone=no><meta name=format-detection content=email=no />
Das iPhone fügt Ihrem Text automatisch einen Linkstil hinzu und klicken Sie auf die Nummer, um die Nummer automatisch zu wählen!
phone=no ignoriert die Nummern auf der Seite und identifiziert sie als Telefonnummern
phone=yes aktiviert die Umwandlung von Nummern in DFÜ-Links. Sie ist standardmäßig aktiviert!
<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 />
Steuern Sie den Anzeigestil der Statusleiste: Standard (weiß), schwarz (schwarz), schwarz-durchscheinend (grau durchscheinend).
Link-Tag Apple-Touch-SymbolWenn „apple-mobile-web-app-capable“ auf „Ja“ eingestellt ist, können Sie die Schaltfläche „Zum Startbildschirm hinzufügen“ verwenden, um die Website zum Startbildschirm auf iPhone, iPad und iTouch Safari hinzuzufügen.
Durch Festlegen des entsprechenden Apple-Touch-Icon-Tags verwendet das zum Startbildschirm hinzugefügte Symbol das von uns angegebene Bild.
Im Folgenden wird ein optimales Symbol für verschiedene OX-Geräte ausgewählt. Die Standardgröße für das iPhone beträgt 60 Pixel, für das iPad 76 Pixel und der Retina-Bildschirm wird mit dem Zweifachen multipliziert.
<link rel=apple-touch-icon href=touch-icon-iphone.png><link rel=apple-touch-iconsizes=76×76″ href=touch-icon-ipad.png><link rel=apple- Touch-Icon-Größen=120×120″ href=touch-icon-iphone-retina.png><link rel=apple-touch-icon Größen=152×152″ href=touch-icon-ipad-retina.png>
Vor iOS7 fügte das System standardmäßig Spezialeffekte (abgerundete Ecken und Hervorhebungen) zu Symbolen hinzu. Wenn Sie nicht möchten, dass das System Spezialeffekte hinzufügt, können Sie apple-touch-icon-precomposed.png anstelle von apple-touch- verwenden. icon.png.
Die Priorität der Symbolverwendung ist wie folgt:Wenn es kein Symbol gibt, das der empfohlenen Größe für das entsprechende Gerät entspricht, wird zuerst das Symbol verwendet, das größer als die empfohlene Größe ist, aber der empfohlenen Größe am nächsten kommt.
Wenn keine Symbole vorhanden sind, die größer als die empfohlene Größe sind, wird zuerst das Symbol ausgewählt, das der empfohlenen Größe am nächsten kommt.
Wenn mehrere Symbole vorhanden sind, die der empfohlenen Größe entsprechen, wird zuerst das Symbol ausgewählt, das das vorkomponierte Schlüsselwort enthält.
Wenn Sie im Bereich kein Symbol mithilfe des Link-Tags angeben, wird im Stammverzeichnis der Website automatisch nach PNG-Symbolen mit dem Präfix „apple-touch-icon“ gesucht.
Hinweis: ios7 fügt Symbolen keine Spezialeffekte mehr hinzu. Vor ios7 wurden Symbolen standardmäßig Spezialeffekte hinzugefügt, es sei denn, das Symbol hatte das Schlüsselwort -precomposed.png als Suffix. Internet Explorer <meta http-equiv=X-UA-Compatible content=IE=edge> Verhindern Sie, dass der IE den Kompatibilitätsmodus verwendet
<meta name=MobileOptimized content=320″> Das von Microsoft für die IE Mobile-Version festgelegte Definitionsbreiten-Tag
Der Browser passt die Größe der Datei nicht automatisch an, was bedeutet, dass sie eine feste Größe hat und nicht mit dem Browser gedehnt oder skaliert wird.
<meta name=HandheldFriendly content=true /> : Ob es für Handheld-Geräte geeignet ist, nur wahr oder falsch
<meta name=screen-orientation content=portrait> Vertikalen Bildschirm erzwingen
<meta name=full-screen content=yes> Vollbild erzwingen
<meta name=browsermode content=application> Anwendungsmodus
<meta name=x5-orientation content=portrait> Vertikalen Bildschirm erzwingen
<meta name=x5-fullscreen content=true> Vollbild erzwingen
<meta name=x5-page-mode content=app> Anwendungsmodus
<meta name=renderer content=webkit> Aktivieren Sie den Schnellmodus
Das Meta bezieht sich auf das Element, das Metainformationen über die Seite bereitstellt, wie z. B. Beschreibungen und Schlüsselwörter für Suchmaschinen und Aktualisierungshäufigkeit. Das Tag befindet sich am Kopf des Dokuments und enthält keinen Inhalt. Die Eigenschaften eines Tags definieren die mit dem Dokument verknüpften Name/Wert-Paare.
Welche einzigartigen Funktionen gibt es in der mobilen Version?<meta content=width=device-width, initial-scale=1.0, Maximum-scale=1.0, user-scalable=0 name=viewport> <meta content=yes name=apple-mobile-web-app-capable> <meta content=black name=apple-mobile-web-app-status-bar-style> <meta content=telephone=no name=format-detection>
Das erste Meta-Tag bedeutet: Erzwingen Sie, dass die Breite des Dokuments zur Breite des Geräts 1:1 bleibt. Das maximale Breitenverhältnis des Dokuments beträgt 1,0. Benutzer dürfen nicht auf den Bildschirm klicken, um die Ansicht zu vergrößern.
Das zweite Meta-Tag ist das private Safari-Meta-Tag im iPhone-Gerät, was bedeutet: Surfen im Vollbildmodus zulassen;
Das dritte Meta-Tag ist ebenfalls ein privates Tag des iPhone, das den Stil der Statusleiste oben in Safari im iPhone angibt;
Die Farbe der Statusleiste (obere Leiste des Bildschirms) in Web-App-Anwendungen;
Der Standardwert ist Standard (Weiß), der auf Schwarz (Schwarz) und Schwarz-Transluzent (Grau-Transluzent) eingestellt werden kann.
Hinweis: Wenn der Wert schwarz-durchscheinend ist, nimmt er die px-Position der Seite ein und schwebt über der Seite (er deckt die 20px-Höhe der Seite ab – der Retina-Bildschirm von iphone4 und itouch4 ist 40px groß).Das vierte Meta-Tag bedeutet: Weisen Sie das Gerät an, die Nummern auf der Seite als Telefonnummern zu ignorieren.
Werfen wir einen Blick auf die Meta der mobilen Seiten großer Hersteller: 1. Klein<meta name=aplus-terminal content=1/><meta name=apple-mobile-web-app-title content=TMALL/><meta name=apple-mobile-web-app-capable content=yes/><meta name=apple-mobile-web-app-status-bar-style content=black-translucent/><meta name=viewport content=width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no/><meta name=format-detection content=telephone=no, address=no>2. Taobao
<meta charset=utf-8><meta content=yes name=apple-mobile-web-app-capable/> <meta content=yes name=apple-touch-fullscreen/> <meta content=telephone=no,email= no name=format-detection/> <meta name=App-Config content=fullscreen=yes,useHistoryState=yes,transition=yes/><meta name=viewport Inhalt=Anfangsskala=0,5, Maximalskala=0,5, Mindestskala=0,5, Benutzerskalierbar=Nein>3. Jingdong
<title>Jingdong-Mobile-Version</title><meta name=viewport content=width=device-width, initial-scale=1.0, Maximum-scale=1.0, user-scalable=0;><meta http-equiv=Content -Type content=text/html; charset=GBK><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=black><meta name=format-detection content=telephone=no><meta http-equiv=Läuft ab content=-1><meta http-equiv= Cache-Control content=no-cache><meta http-equiv=Pragma content=no-cache><meta name=Keywords content=><meta name=description content=>4. NetEase
<title>NetEase Mobile</title><meta name=viewport content=width=device-width,initial-scale=1, Maximum-scale=1, Minimum-scale=1, user-scalable=no><meta content = phone=no name=format-detection /><meta name=keywords content= /><meta name=description content= />5. Baidu
<meta name=referrer content=always><meta charset=utf-8><meta name=viewport content=width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no><meta name=format-detection content=telephone=no>6. Sohu
<title>Mobile Sohu.com</title> <meta http-equiv=Content-Type content=text/html; meta name=viewport content=width=device-width, user-scalable=no, initial-scale=1.0, Maximum-scale=1.0, Minimum-scale=1.0 /><meta name=MobileOptimized content=320/><meta name=description content= /><meta name=keywords content= />
----
Simulieren Sie eine mobile Webseite<meta name=viewport content=width=device-width,user-scalable=no, initial-scale=1.0, Maximum-scale=1.0, Minimum-scale=1.0″>
Ansichtsfenster -> Fenster (Anzeigebereich)
width=device-width Gerätebreite
Ansichtsfenster<metaname = 'viewport 'content = width=320><metaname = 'viewport 'content = width=device-width>
user-scalable=no/0 gibt an, ob eine Skalierung zulässig ist
Anfangsskala = 1,0 Anfangswert
maximale Skala = 1,0
Mindestmaßstab = 1,0
--------------------------
<meta name=viewport content=width=device-width, user-scalable=no>
user-scalable=no/0 verhindert, dass Benutzer die Seite skalieren
<meta name=viewport content=width=device-width, user-scalable=no, initial-scale=1.0″>
initial-scale=1.0 Seitenzoomverhältnis initialisieren
<meta name=viewport content=width=device-width, initial-scale=1.0, Maximum-scale=1.0, user-scalable=0″>
Maximum-Scale = 1,0 maximales Skalierungsverhältnis (für einzelne Mobiltelefone Huawei Meta8)
--------------------------
Apple-gerätespezifische Meta:<! – Webseiten können als Apps ausgeführt werden (Hinzufügen zum Startbildschirm zulassen) – ><meta name=apple-mobile-web-app-capable content=yes><! – Farbe der Statusleiste – ><meta name=apple- mobile -web-app-status-bar-style content=black>Jingdong-Meta:
<meta name=viewport content=width=device-width, initial-scale=1.0, Maximum-scale=1.0, user-scalable=0″><meta name=apple-mobile-web-app-capable content=yes>< meta name=apple-mobile-web-app-status-bar-style content=black><! – Verbotene Telefonnummern und E-Mail-Adressen –><meta name=format-detection content=telephone=no,email=no>Taobao-Meta:
<meta content=yes name=apple-mobile-web-app-capable><!–Klicken Sie auf den Seitenbereich, um ihn im Vollbildmodus anzuzeigen –><meta content=yes name=apple-touch-fullscreen/><meta content=telephone =no,email =no name=format-detection/><!–Anwendungsinformationen, Systemverlauf beibehalten, Bewegungseffekte–><meta name=App-Config content=fullscreen=yes,useHistoryState=yes,transition=yes/>Andere Meta:
<!–Zwingen Sie den 360-Browser, den Chrome-Kernel zum Rendern der Seite zu verwenden–><meta name=renderer content=webkit><!–Versuchen Sie, den neuesten Modus des IE zum Rendern zu verwenden–><meta http-equiv=X-UA -Kompatibler Inhalt=IE= Edge><!–Optimiert für Handheld-Geräte, hauptsächlich für einige alte Browser, die keine Ansichtsfenster erkennen, wie z. B. BlackBerry–><meta name=HandheldFriendly content=true><!–Microsofts alter Browser–><meta name=MobileOptimized content=320″><!– uc erzwingt vertikalen Bildschirm–><meta name=screen-orientation content=portrait><!– QQ erzwingt vertikalen Bildschirm –><meta name=x5-orientation content=portrait><!– UC erzwingt Vollbild–><meta name=full-screen content=yes><!– QQ erzwingt Vollbild–><meta name=x5-fullscreen content=true><!– UC-Anwendungsmodus–><meta name=browsermode content=application><!– QQ-Anwendungsmodus–><meta name=x5-page- Modus content=app>Zusammenfassen
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels einen gewissen Referenzwert für das Studium oder die Arbeit aller hat. Wenn Sie Fragen haben, können Sie eine Nachricht für die Kommunikation hinterlassen Netzwerk.