Eine vollständige Liste der Meta-Tag-Einstellungen für Mobilgeräte

Vorwort

Als ich zuvor das Front-End studierte, bestand mein Verständnis von Meta-Tags nur aus diesem Satz.

<meta charset="UTF-8">

Wenn Sie jedoch eine beliebige Website öffnen, finden Sie in ihrem Head-Tag eine Spalte mit Meta-Tags. Beispielsweise unsere Website 123WORDPRESS.COM, die ich jedoch nicht kannte, weshalb ich den Meta-Tag in den Vordergrund des Lernplans stellte.

<Metaname = „Ansichtsfenster“ Inhalt = „Breite = Gerätebreite, Anfangsmaßstab = 1,0, Maximalmaßstab = 1,0, Minimalmaßstab = 1,0, benutzerdefiniert skalierbar = nein“>

Dies ist die am häufigsten verwendete Methode. Die Anweisungen width und height geben die logische Breite bzw. Höhe des Ansichtsfensters an. Ihr Wert ist entweder eine Zahl in Pixeln oder ein spezielles Markierungssymbol. Die Breitenanweisung verwendet das Gerätebreiten-Tag, um anzugeben, dass die Ansichtsfensterbreite der Bildschirmbreite des Geräts entsprechen soll. In ähnlicher Weise verwendet die Höhenanweisung das Gerätehöhen-Tag, um anzugeben, dass die Ansichtsfensterhöhe der Bildschirmhöhe des Geräts entspricht.
Die Direktive „user-scalable“ gibt an, ob der Benutzer das Ansichtsfenster skalieren kann, d. h. die Ansicht der Webseite vergrößern und verkleinern kann. Der Wert „yes“ erlaubt dem Benutzer das Vergrößern oder Verkleinern, der Wert „no“ erlaubt kein Vergrößern oder Verkleinern.

Mit der Direktive „initial-scale“ wird der anfängliche Maßstab einer Webseite festgelegt. Der standardmäßige anfängliche Zoomwert variiert je nach Smartphone-Browser. Normalerweise rendert das Gerät die gesamte Webseite im Browser, wenn Sie diesen Wert jedoch auf 1,0 setzen, wird das Webdokument ohne Skalierung angezeigt.

Mit den Anweisungen für den maximalen Maßstab und den minimalen Maßstab werden benutzerdefinierte Grenzen für den Zoomfaktor einer Webseite festgelegt. Der Wertebereich liegt zwischen 0,25 und 10,0. Wie beim Anfangsmaßstab ist der Wert dieser Anweisungen der Maßstab, der auf den Inhalt des Ansichtsfensters angewendet wird.

Alle Smartphone-Browser unterstützen die Breiten- und Benutzerskalierungsanweisungen des ViewPort-<Meta>-Tags. Opera Mobile verwendet die Anweisung „User-Scalable“ jedoch nicht, sondern plädiert stattdessen dafür, dass Benutzern stets die Möglichkeit zum Zoomen von Webseiten in mobilen Browsern erhalten bleiben soll.

Folgendes wird wirklich selten verwendet

Gerätepixelverhältnis

window.devicePixelRatio ist das Verhältnis der physischen Pixel auf dem Gerät zu geräteunabhängigen Pixeln (Dips). Die Formel lautet: window.devicePixelRatio = physikalische Pixel / Dips

An Bildschirmgröße anpassender Website-adaptiver Bildschirm

Wenn der Inhaltswert kleiner oder gleich der Bildschirmbreite ist, wird die Bildschirmanpassung deaktiviert und die Website wird nicht mit dem Browser gestreckt und skaliert.

Wenn der Wert des Inhalts größer als die Bildschirmbreite ist, wird die Anpassung an den Bildschirm aktiviert.

Bezogen auf den Apple-Browser

08.07.2015

<meta name=”Ansichtsfenster” content=”minimal-ui”>

In Safari unter iOS 7.1 wird dem Meta-Tag ein neues Minimal-UI-Attribut hinzugefügt, das es ermöglicht, beim Laden einer Webseite die Adressleiste oben und die Navigationsleiste unten auszublenden.

<meta name=”apple-mobile-web-app-fähig” content=”ja”>

Wenn Sie die Option auf „Ja“ setzen, löscht die Website 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=”telefon=nein”>
<meta name=”Formaterkennung” Inhalt=”E-Mail=Nein” />

Das iPhone fügt Ihren Text automatisch als Link hinzu und wählt automatisch die Nummer, wenn Sie darauf klicken!

„phone=no“ ignoriert die Nummern auf der Seite und erkennt sie als Telefonnummern

Mit Telephone=yes wird die Umwandlung von Rufnummern in Einwahlverbindungen aktiviert, welche standardmäßig eingeschaltet ist!

<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” />

Steuern Sie den Anzeigestil der Statusleiste Standard (weiß) schwarz (schwarz) schwarz-durchscheinend (grau durchscheinend)

Link-Tag Apple-Touch-Symbol

Wenn „apple-mobile-web-app-capable“ auf „Ja“ eingestellt ist, können Sie die Website mit der Schaltfläche „Zum Home-Bildschirm hinzufügen“ zum Home-Bildschirm von Safari auf iPhone, iPad und iTouch hinzufügen.

Durch Festlegen des entsprechenden Apple-Touch-Icon-Tags verwendet das zum Startbildschirm hinzugefügte Symbol das von uns angegebene Bild.

Im Folgenden wählen Sie das beste Symbol für verschiedene OX-Geräte aus. Die Standardgröße beträgt beim iPhone 60 Pixel, beim iPad 76 Pixel und bei Retina-Bildschirmen ist sie doppelt so groß.

<link rel=”Apple-Touch-Symbol” href=”Touch-Symbol-iPhone.png”>
<link rel=”apple-touch-icon” Größen=”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 iOS 7 fügt das System den Symbolen standardmäßig Spezialeffekte hinzu (abgerundete Ecken und Hervorhebungen). Wenn Sie nicht möchten, dass das System Spezialeffekte hinzufügt, können Sie apple-touch-icon-precomposed.png anstelle von apple-touch-icon.png verwenden.

Die Priorität der Symbolverwendung ist wie folgt:

Wenn kein Symbol vorhanden ist, das der empfohlenen Größe für das Gerät entspricht, wird zuerst ein Symbol verwendet, das größer als die empfohlene Größe ist, der empfohlenen Größe aber am nächsten kommt.

Wenn es kein Symbol gibt, das die empfohlene Größe überschreitet, wird das Symbol bevorzugt, das der empfohlenen Größe am nächsten kommt.

Wenn mehrere Symbole die empfohlene Größe aufweisen, wird dem Symbol mit dem vorab zusammengesetzten Schlüsselwort Vorrang eingeräumt.

Wenn Sie im Bereich über den Link-Tag kein Icon angeben, wird automatisch im Stammverzeichnis der Website nach einem PNG-Icon mit dem Präfix „apple-touch-icon“ gesucht.

Hinweis: iOS 7 fügt Symbolen keine Spezialeffekte mehr hinzu. Vor iOS 7 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″> Von Microsoft für IE Mobile festgelegtes Breiten-Tag

Der Browser passt die Größe der Datei nicht automatisch an. Das heißt, es handelt sich um eine feste Größe, die nicht mit dem Browser gedehnt oder skaliert wird.

<meta name=”HandheldFriendly” content=”true” /> : Ob es für Handheld-Geräte geeignet ist, nur true oder false

UC Browser

<meta name=”screen-orientation” content=”portrait”> Vertikalen Bildschirm erzwingen

<meta name=”full-screen” content=”yes”> Vollbild erzwingen

<meta name=”browsermode” content=”application”> Anwendungsmodus

QQ-Browser

<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

360 Browser

<meta name=”renderer” content=”webkit”> Schnellmodus aktivieren

Das Meta-Element bietet Metainformationen über die Seite, beispielsweise Beschreibungen und Schlüsselwörter für Suchmaschinen sowie Aktualisierungshäufigkeit. Der Tag befindet sich im Kopf des Dokuments und enthält keinen Inhalt. Die Attribute eines Tags definieren die mit dem Dokument verknüpften Name/Wert-Paare.

Welche Funktionen sind einzigartig für Mobiltelefone?

<meta content="Breite=Gerätebreite, Anfangsmaßstab=1,0, Maximalmaßstab=1,0, Benutzerskalierung=0" name="Ansichtsfenster">     

<meta content="ja" name="apple-mobile-web-app-fähig">     

<meta content="schwarz" name="apple-mobile-web-app-statusbar-style">     

<meta content="Telefonnummer" name="Formaterkennung">

Das erste Meta-Tag bedeutet: Erzwingen Sie ein Verhältnis von Dokumentbreite 1:1 zur Gerätebreite und ein maximales Verhältnis von Dokumentbreite zu 1,0. Lassen Sie nicht zu, dass Benutzer zum Vergrößern auf den Bildschirm klicken.

• width - die Breite des Ansichtsfensters height - die Höhe des Ansichtsfensters
• initial-scale - die anfängliche Skala
• 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

Der zweite Meta-Tag ist ein privater Meta-Tag für Safari auf iPhone-Geräten, was bedeutet: Surfen im Vollbildmodus erlauben;

Das dritte Meta-Tag ist ebenfalls ein privates Tag für das iPhone, das den Stil der Statusleiste oben in Safari auf dem iPhone angibt.

Die Farbe der Statusleiste (obere Leiste des Bildschirms) in der Web-App;

Der Standardwert ist „Default“ (Weiß) und kann auf „Black“ (Schwarz) und „Black-Translucent“ (Grau-Translucent) eingestellt werden.

Hinweis: Wenn der Wert „schwarz-durchscheinend“ ist, nimmt es die Seiten-Pixelposition ein und schwebt über der Seite (es deckt 20 Pixel der Seitenhöhe ab – 40 Pixel für den Retina-Bildschirm von iPhone4 und itouch4).

Der vierte Meta-Tag lautet: Weisen Sie das Gerät an, die Zahlen auf der Seite nicht als Telefonnummern zu erkennen.

Werfen wir einen Blick auf die Metadaten 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-fähig" content="ja"/>
<meta name="apple-mobile-web-app-status-bar-style" content="schwarz-durchscheinend"/>
<meta name="viewport" content="width=Gerätebreite,Anfangsskalierung=1,Maximalskalierung=1,Benutzerskalierung=nein"/>
<meta name="format-detection" content="Telefonnummer, Adressenummer">

2. Taobao

<meta charset="utf-8">

<meta content="ja" name="apple-mobile-web-app-fähig"/> 

<meta content="yes" name="apple-touch-fullscreen"/> 

<meta content="Telefonnr.,E-Mailnr." name="Formaterkennung"/> 

<meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes"/>

<meta name="viewport" content="Anfangsmaßstab=0,5, Maximalmaßstab=0,5, Minimalmaßstab=0,5, benutzerdefiniert skalierbar=nein">

3. JD.com

<title>JD.com – Mobile Version</title>

<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1,0, Maximalmaßstab=1,0, Benutzerskalierung=0;">

<meta http-equiv="Inhaltstyp" content="text/html; charset=GBK">

<meta name="apple-mobile-web-app-fähig" content="ja">

<meta name="apple-mobile-web-app-status-bar-style" content="schwarz">

<meta name="format-detection" content="telefonnr">
<meta http-equiv="Läuft ab" content="-1">

<meta http-equiv="Cache-Steuerung" content="kein Cache">

<meta http-equiv="Pragma" content="kein-cache">

<meta name="Schlüsselwörter" content="">

<meta name="Beschreibung" Inhalt="">

4. NetEase

<Titel>NetEase Mobile</Titel>

<meta name="viewport" content="width=Gerätebreite,Anfangsmaßstab=1, Maximalmaßstab=1, Minimalmaßstab=1, Benutzerskalierung=nein">

<meta content="Telefonnummer" name="Formaterkennung" />

<meta name="Schlüsselwörter" content="" />

<meta name="Beschreibung" Inhalt="" />

5. Baidu

<meta name="referrer" content="immer">

<meta charset="utf-8">

<meta name="viewport" content="width=Gerätebreite,Minimalmaßstab=1.0,Maximalmaßstab=1.0,Benutzerskalierbar=nein">

<meta name="format-detection" content="telefonnr">

6. Sohu

<Titel>Sohu Mobile</Titel>
                            
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />

<meta http-equiv="Cache-Steuerung" content="kein-cache" />

<meta name="viewport" content="width=Gerätebreite, benutzerdefiniert skalierbar=nein, Anfangsmaßstab=1,0, Maximalmaßstab=1,0, Minimalmaßstab=1,0" />

<meta name="MobilOptimized" content="320"/>

<meta name="Beschreibung" Inhalt="" />

<meta name="Schlüsselwörter" content="" />

————————

Mobile Webseite simulieren

<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=Gerätebreite Gerätebreite

Ansichtsfenster

<metaname = 'Ansichtsfenster' Inhalt = "Breite=320">

<metaname = 'Ansichtsfenster' Inhalt = "Breite=Gerätebreite">

user-scalable=no/0Gibt an, ob Skalierung erlaubt ist

initial-scale=1.0 Anfangswert

maximaler Maßstab = 1,0

Mindestmaßstab = 1,0

————————————————————————————–

<meta name=”viewport” content=”width=Gerätebreite, benutzerskalierbar=nein”>

user-scalable=no/0 Benutzerskalierung der Seite deaktivieren

<meta name=”viewport” content=”width=Gerätebreite, benutzerskalierbar=nein, Anfangsmaßstab=1,0″>

initial-scale=1.0 Initialisiert das Seitenzoomverhältnis

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″>

maximum-scale=1.0 maximales Zoomverhältnis (für einzelne Mobiltelefone wie Huawei Meta8)

————————————————————————————–

Apple-gerätespezifische Metadaten:

<!—Erlaubt, dass die Webseite als App ausgeführt wird (erlaubt, dass sie zum Startbildschirm hinzugefügt wird)—>

<meta name=”apple-mobile-web-app-fähig” content=”ja”>

<!—Statusleistenfarbe—>

<meta name=”apple-mobile-web-app-status-bar-style” content=”schwarz”>

JD-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-fähig” content=”ja”>

<meta name=”apple-mobile-web-app-status-bar-style” content=”schwarz”>

<!—Andere Telefonnummern und E-Mail-Adressen sind nicht zulässig—>

<Metaname = "Formaterkennung" Inhalt = "Telefon = nein, E-Mail = nein">

Taobao-Metadaten:

<Metainhalt=”ja” Name=”apple-mobile-web-app-fähig”>

<!–Klicken Sie auf den Seitenbereich, um ihn im Vollbildmodus anzuzeigen—>

<meta content="yes" name="apple-touch-fullscreen"/>

<meta content="Telefonnr.,E-Mailnr." name="Formaterkennung"/>

<!– Anwendungsinformationen, Systemverlauf beibehalten, Bewegungseffekte–>

<meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes"/>

Andere Metadaten:

<!–Den 360-Browser zwingen, den Chrome-Kernel zum Rendern der Seite zu verwenden–>

<Metaname=”Renderer” Inhalt=”Webkit”>

<!–Versuchen Sie, den neuesten IE-Renderingmodus zu verwenden–>

<meta http-equiv="X-UA-kompatibel" content="IE=edge">

<!–Optimiert für Handheld-Geräte, vor allem für einige alte Browser, die Viewport nicht erkennen, wie z. B. BlackBerry–>

<meta name=”HandheldFriendly” content=”true”>

<!–Der alte Browser von Microsoft–>

<meta name=”MobilOptimized” content=”320″>

<!– uc erzwingt vertikalen Bildschirm–>

<meta name=”Bildschirmausrichtung” content=”Hochformat”>

<!– QQ erzwungener vertikaler Bildschirm–>

<meta name=”x5-orientation” content=”portrait”>

<!– UC erzwungener Vollbildmodus–>

<Metaname = „Vollbild“ Inhalt = „Ja“>

<!– QQ erzwungener Vollbildmodus–>

<meta name=”x5-fullscreen” content=”true”>

<!– UC-Anwendungsmodus–>

<meta name=”Browsermodus” content=”Anwendung”>

<!– QQ-Anwendungsmodus–>

<Metaname = "x5-Seitenmodus" Inhalt = "App">

Zusammenfassen

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels einen gewissen Lernwert für Ihr Studium oder Ihre Arbeit hat. Wenn Sie Fragen haben, können Sie eine Nachricht hinterlassen. Vielen Dank für Ihre Unterstützung von 123WORDPRESS.COM.