Maison > Article > interface Web > Explication détaillée du terminal mobile HTML de chaque balise méta de la nouvelle page vierge
Explication détaillée du terminal mobile HTML de chaque balise méta de la nouvelle page vierge
- 黄舟original
- 2017-06-29 13:26:033215parcourir
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title></head><body></body></html>
balise méta
<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" />
viewport
Fenêtre d'affichage, une balise spécifique au mobile. Généralement, le code suivant peut être utilisé :
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
Le code ci-dessus indique à son tour que la largeur est définie sur la largeur de l'appareil, la valeur par défaut n'est pas la mise à l'échelle, l'utilisateur n'est pas autorisé à zoomer ( c'est-à-dire que la mise à l'échelle est interdite) et l'adresse est masquée lors du chargement de la page Web. Barre et barre de navigation (nouveau dans 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] 目标屏幕像素密度
Remarque : la densité de pixels de l'écran target-densitydpi est liée à la mise à l'échelle. Vous pouvez essayer de modifier cette démo et voir l'effet réel sur votre téléphone mobile. Je ne définis généralement pas cette propriété.
apple-mobile-web-app-capable
L'activation ou non de la fonction webapp supprimera la barre d'outils et la barre de menus Apple par défaut.
<meta name="apple-mobile-web-app-capable" content="yes" />
apple-mobile-web-app-status-bar-style
Lorsque la fonction webapp est démarrée, la couleur de la barre de navigation supérieure qui affiche le signal du téléphone mobile, l'heure, et batterie. La valeur par défaut est default (blanc), qui peut être définie sur noir (noir) et noir-translucide (gris translucide). Ceci est principalement défini en fonction de la correspondance des couleurs principales de la conception réelle de la page.
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
Remarque : si vous ne comprenez pas apple-mobile-web-app-capable et apple-mobile-web-app-status-bar-style, vous pouvez consulter le troisième article de référence ci-dessous, qui contient des captures d'écran.
téléphone et email
Ignorer les numéros de la page qui sont reconnus comme numéros de téléphone
<meta name="format-detection" content="telephone=no" />
Il existe également une reconnaissance d'e-mail
<meta name="format-detection" content="email=no" />
Bien sûr, les deux ou peuvent être écrits ensemble
<meta name="format-detection" content="telphone=no, email=no" />
Autres méta
<!-- 启用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">
Référence :
Section Balises méta prises en charge de Safari Référence HTML
Choses sur le travail front-end mobile --- Balises méta dans la production front-end
Balises méta sur les plateformes mobiles-- ---Fonction magique de
Balise méta WebApp
balise de lien
apple-touch-icon
si Si apple-mobile-web-app-capable est défini sur yes, vous pouvez utiliser le bouton Ajouter à l'écran d'accueil pour ajouter le site Web à l'écran d'accueil de Safari sur iPhone, iPad et iTouch. En définissant la balise apple-touch-icon correspondante, l'icône ajoutée à l'écran d'accueil utilisera la image que nous avons spécifiée.
Ce qui suit est une sélection de la meilleure icône pour différents appareils ox. La taille par défaut pour l'iPhone est de 60 pixels, celle de l'iPad est de 76 pixels et l'écran Retina est multiplié par 2.
<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">
Avant iOS7, le système ajoutait des effets spéciaux (coins arrondis et reflets) à l'icône par défaut. Si vous ne souhaitez pas que le système ajoute des effets spéciaux, vous pouvez utiliser apple-touch-icon-precomposed.png à la place. l'icône apple-touch-icon.png
. La priorité est la suivante :
S'il n'y a pas d'icône qui correspond à la taille recommandée du appareil correspondant, l'icône qui est plus grande que la taille recommandée mais la plus proche de la taille recommandée sera utilisée en premier.
S'il n'y a pas d'icône plus grande que la taille recommandée, l'icône la plus proche de la taille recommandée sera prioritaire.
S'il y a plusieurs icônes qui répondent à la taille recommandée, l'icône contenant le mot-clé précomposé sera sélectionnée en premier.
Si l'icône n'est pas spécifiée à l'aide de la balise de lien dans la zone, elle recherchera automatiquement les icônes png préfixées par dans le répertoire racine du apple-touch-icon site web.
Remarque : iOS7 n'ajoute plus d'effets spéciaux aux icônes. Avant iOS7, les effets spéciaux étaient ajoutés aux icônes par défaut, sauf si l'icône avait le mot-clé -precomposed.png comme suffixe.
Référence :
Spécification d'une icône de page Web pour un clip Web
-
WebApp apple-touch-icon
http://taylor.fausak.me/2013/11/01/ios-7-web-apps/
apple-touch-startup -image
est également défini sur apple-mobile-web-app-capable en fonction de yes. Vous pouvez utiliser WebApp pour définir un écran de démarrage similaire à NativeApp.
<link rel="apple-touch-startup-image" href="/startup.png">
est différent de apple-touch-icon en ce sens que apple-mobile-web-app-capable ne prend pas en charge l'attribut tailles, le média est donc utilisé pour contrôler la rétine et les écrans horizontaux et verticaux pour charger différents écrans de démarrage.
// 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" />
Résumé
Modèle de page vierge, puis ajoutez l'icône Apple-Touch et l'image de démarrage Apple-Touch
<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
en fonction de la situation spécifiqueCe qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!