Heim > Artikel > Web-Frontend > Detaillierte Erläuterung jedes Meta-Tags einer neuen leeren Seite im HTML-Mobilterminal
Detaillierte Erläuterung jedes Meta-Tags einer neuen leeren Seite im HTML-Mobilterminal
- 黄舟Original
- 2017-06-29 13:26:033174Durchsuche
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title></head><body></body></html>
Meta-Tag
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" /> <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, email=no" />
Ansichtsfenster
Ansichtsfenster, ein Tag speziell für mobile Endgeräte. Im Allgemeinen kann der folgende Code verwendet werden:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
Der obige Code zeigt wiederum an, dass die Breite auf die Breite des Geräts eingestellt ist. Der Standardwert ist keine Skalierung, der Benutzer darf nicht zoomen (. d. h. Skalierung ist verboten) und die Adresse wird beim Laden der Webseite ausgeblendet. Leiste und Navigationsleiste (neu in ios7.1).
width – // [pixel_value | device-width] viewport 的宽度，范围从 200 到 10,000，默认为 980 像素 height – // [pixel_value | device-height ] viewport 的高度，范围从 223 到 10,000 initial-scale – // float_value，初始的缩放比例 （范围从 > 0 到 10） minimum-scale – // float_value，允许用户缩放到的最小比例 maximum-scale – // float_value，允许用户缩放到的最大比例 user-scalable – // [yes | no] 用户是否可以手动缩放 target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi] 目标屏幕像素密度
Hinweis: Die Bildschirmpixeldichte von target-densitydpi hängt mit der Skalierung zusammen. Sie können versuchen, diese Demo zu ändern und den tatsächlichen Effekt auf Ihrem Mobiltelefon zu sehen. Im Allgemeinen lege ich diese Eigenschaft nicht fest.
Apple-Mobile-Web-App-fähig
Wenn Sie die Webapp-Funktion aktivieren, werden die standardmäßige Apple-Symbolleiste und die Menüleiste gelöscht.
<meta name="apple-mobile-web-app-capable" content="yes" />
apple-mobile-web-app-status-bar-style
Wenn die Webapp-Funktion gestartet wird, wird die Farbe der oberen Navigationsleiste, die das Mobiltelefonsignal und die Uhrzeit anzeigt, angezeigt , und Batterie. Der Standardwert ist Standard (Weiß), der auf Schwarz (Schwarz) und Schwarz-Transluzent (Grau-Transluzent) eingestellt werden kann. Dies wird hauptsächlich basierend auf der Hauptfarbanpassung des tatsächlichen Seitendesigns festgelegt.
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
Hinweis: Wenn Sie apple-mobile-web-app-capable und apple-mobile-web-app-status-bar-style nicht verstehen, können Sie den dritten Referenzartikel unten lesen, der Screenshots enthält.
Telefon & E-Mail
Nummern auf der Seite ignorieren, die als Telefonnummern erkannt werden
<meta name="format-detection" content="telephone=no" />
Es gibt auch eine E-Mail-Erkennung
<meta name="format-detection" content="email=no" />
Von Natürlich beides oder können zusammen geschrieben werden
<meta name="format-detection" content="telphone=no, email=no" />
Andere Meta
<!-- 启用360浏览器的极速模式(webkit) --><meta name="renderer" content="webkit"> <!-- 避免IE使用兼容模式 --><meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 --> <meta name="HandheldFriendly" content="true"><!-- 微软的老式浏览器 --> <meta name="MobileOptimized" content="320"><!-- uc强制竖屏 --> <meta name="screen-orientation" content="portrait"> <!-- QQ强制竖屏 --><meta name="x5-orientation" content="portrait"> <!-- UC强制全屏 --><meta name="full-screen" content="yes"> <!-- QQ强制全屏 --><meta name="x5-fullscreen" content="true"> <!-- UC应用模式 --><meta name="browsermode" content="application"> <!-- QQ应用模式 --><meta name="x5-page-mode" content="app"> <!-- windows phone 点击无高光 --> <meta name="msapplication-tap-highlight" content="no">
Referenz:
Abschnitt „Unterstützte Meta-Tags“ der Safari HTML-Referenz
Dinge über mobile Front-End-Arbeit---Meta-Tags in der Front-End-Produktion
Meta-Tags auf mobilen Plattformen---- -Magische Funktion des
WebApp-Meta-Tags
Link-Tag
Apple-Touch-Icon
Wenn apple-mobile-web-app-capable auf yes eingestellt ist, können Sie die Website mit der Schaltfläche „Zum Startbildschirm hinzufügen“ zum Startbildschirm in Safari auf iPhone, iPad und iTouch hinzufügen. Durch Setzen 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-icon" sizes="76x76" href="touch-icon-ipad.png"> <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png"> <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
Vor iOS7 fügte das System standardmäßig Spezialeffekte (abgerundete Ecken und Hervorhebungen) zum Symbol hinzu. Wenn Sie nicht möchten, dass das System Spezialeffekte hinzufügt, können Sie stattdessen apple-touch-icon-precomposed.png verwenden Das apple-touch-icon.png
-Symbol Die -Priorität lautet wie folgt:
Wenn kein Symbol vorhanden ist, das der empfohlenen Größe entspricht Auf dem entsprechenden Gerät wird zuerst das Symbol verwendet, das größer als die empfohlene Größe ist, aber der empfohlenen Größe am nächsten kommt.
Wenn es kein Symbol gibt, das größer als die empfohlene Größe ist, wird dem Symbol, das der empfohlenen Größe am nächsten kommt, Priorität eingeräumt.
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 das Symbol nicht über das Link-Tag im Bereich angegeben wird, wird automatisch im Stammverzeichnis von nach PNG-Symbolen mit dem Präfix apple-touch-icon gesucht Webseite.
Hinweis: ios7 fügt den Symbolen keine Spezialeffekte mehr hinzu. Vor ios7 wurden den Symbolen standardmäßig Spezialeffekte hinzugefügt, es sei denn, das Symbol hatte das Schlüsselwort -precomposed.png als Suffix.
Referenz:
Angeben eines Webseitensymbols für Webclip
-
WebApp Apple-Touch-Symbol
http://taylor.fausak.me/2013/11/01/ios-7-web-apps/
apple-touch-startup -image
wird basierend auf apple-mobile-web-app-capable auch auf yes gesetzt. Sie können WebApp verwenden, um einen Startbildschirm ähnlich wie NativeApp festzulegen.
<link rel="apple-touch-startup-image" href="/startup.png">
unterscheidet sich von apple-touch-icon dadurch, dass apple-mobile-web-app-capable das Größenattribut nicht unterstützt, sodass Medien zur Steuerung der Netzhaut und horizontale und vertikale Bildschirme zum Laden verschiedener Startbildschirme verwendet werden.
// iPhone<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" /> // iPhone Retina<link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /> // iPhone 5<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x1096.png"> // iPad portrait<link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image" /> // iPad landscape<link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image" /> // iPad Retina portrait<link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /> // iPad Retina landscape<link href="apple-touch-startup-image-1496x2048.png"media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image" />
Zusammenfassung
Leere Seitenvorlage und dann Apple-Touch-Symbol und Apple-Touch-Startbild hinzufügen
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
Document
basierend auf der spezifischen SituationDas obige ist der detaillierte Inhalt vonDetaillierte Erläuterung jedes Meta-Tags einer neuen leeren Seite im HTML-Mobilterminal. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!