Dans l'étude précédente sur le front-end, la compréhension des balises méta n'était que cette phrase.
<méta charset=UTF-8>
Mais lorsque vous ouvrez un site Web, il y a une colonne de balises méta dans sa balise head. Par exemple, nous avons le site Web d'arts martiaux VeVb, mais je ne le connais pas, j'ai donc ajouté la balise méta au début du plan d'étude.
<meta name=viewport content=width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no>
C'est la plus couramment utilisée. Les instructions de largeur et de hauteur spécifient respectivement la largeur et la hauteur logiques de la fenêtre. Leur valeur est soit un nombre en pixels, soit un symbole marqueur spécial. La directive width utilise la balise device-width pour indiquer que la largeur de la fenêtre d'affichage doit être la largeur de l'écran du périphérique. De même, la directive height utilise l'indicateur device-height pour indiquer que la hauteur de la fenêtre d'affichage correspond à la hauteur de l'écran de l'appareil.
La directive évolutive par l'utilisateur spécifie si l'utilisateur peut zoomer sur la fenêtre, c'est-à-dire la vue de la page Web. Une valeur de oui permet à l'utilisateur de zoomer, une valeur de non interdit le zoom.
La directive initial-scale est utilisée pour définir la mise à l'échelle initiale de la page Web. La valeur de mise à l'échelle initiale par défaut varie selon les navigateurs de smartphone. Normalement, l'appareil affichera la page Web entière dans le navigateur, le régler sur 1.0 affichera le document Web non mis à l'échelle.
Les directives d'échelle maximale et d'échelle minimale sont utilisées pour définir la limite de l'utilisateur sur le taux de zoom de la page Web. Les valeurs varient de 0,25 à 10,0. Comme pour l'échelle initiale, la valeur de ces directives est la mise à l'échelle appliquée au contenu de la fenêtre.
Tous les navigateurs de smartphone prennent en charge les directives de largeur et d'échelle utilisateur de la balise ViewPort <meta>. Mais Opera Mobile n'utilise pas la directive évolutive par l'utilisateur, arguant plutôt que les utilisateurs devraient toujours conserver la possibilité de zoomer sur les pages Web dans les navigateurs mobiles.
Ce qui suit est très rarement utilisé. appareilPixelRatiowindow.devicePixelRatio est le rapport entre les pixels physiques et les pixels indépendants du périphérique (creux) sur le périphérique. L'expression de la formule est la suivante : window.devicePixelRatio = pixels/dips physiques
écran adaptatif de site Web adapté à l'écranSi la valeur du contenu est inférieure ou égale à la largeur de l'écran, l'ajustement adaptatif de l'écran du site Web sera désactivé. Le site Web ne s'adaptera pas à l'étirement du navigateur.
Si la valeur du contenu est supérieure à la largeur de l'écran ; l'ajustement à l'écran sera activé.
Lié au navigateur Apple2015-07-08
<meta name=viewport content=minimal-ui>
Dans Safari sur iOS 7.1, l'attribut minimal-ui est ajouté à la balise méta, de sorte que la barre d'adresse supérieure et la barre de navigation inférieure puissent être masquées lorsque la page Web est chargée.
<meta name=apple-mobile-web-app-capable content=yes>
L'activation ou non de la fonction webapp est définie sur oui. Le site Web supprimera la barre d'outils Apple et la barre de menus par défaut en mode plein écran.
<meta name=apple-touch-fullscreen content=yes>
Activer la prise en charge des programmes d'applications Web
<meta name=format-detection content=telephone=no><meta name=format-detection content=email=no />
L'iPhone ajoutera automatiquement un style de lien à votre texte et cliquera sur le numéro pour composer automatiquement le numéro !
phone=no ignore les numéros sur la page et les identifie comme des numéros de téléphone
phone=yes active la conversion des numéros en liens commutés. Elle est activée par défaut !
<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=noir-translucent />
Contrôler le style d'affichage de la barre d'état par défaut (blanc) noir (noir) noir-translucide (gris translucide)
balise de lien icône-apple-touchSi apple-mobile-web-app-capable est défini sur oui, vous pouvez utiliser le bouton Ajouter à l'écran d'accueil pour ajouter le site Web à l'écran d'accueil sur iPhone, iPad et iTouch Safari.
En définissant la balise apple-touch-icon correspondante, l'icône ajoutée à l'écran d'accueil utilisera l'image que nous avons spécifiée.
Ce qui suit consiste à sélectionner une icône optimale 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 size=76×76″ href=touch-icon-ipad.png><link rel=apple- tailles des icônes tactiles = 120 × 120″ href=touch-icon-iphone-retina.png><link rel=apple-touch-icon tailles=152×152″ href=touch-icon-ipad-retina.png>
Avant iOS7, le système ajoutait des effets spéciaux (coins arrondis et reflets) aux icônes 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 au lieu de apple-touch-. icône.png.
La priorité d'utilisation des icônes est la suivante :Si aucune icône ne correspond à la taille recommandée pour l'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ônes plus grandes que la taille recommandée, l'icône la plus proche de la taille recommandée sera choisie en premier.
Si plusieurs icônes répondent à la taille recommandée, l'icône contenant le mot-clé précomposé sera sélectionnée en premier.
Si vous ne spécifiez pas d'icône à l'aide de la balise de lien dans la zone, il recherchera automatiquement les icônes png préfixées par apple-touch-icon dans le répertoire racine du site Web.
Remarque : iOS7 n'ajoute plus d'effets spéciaux aux icônes. Avant iOS7, les effets spéciaux étaient ajoutés par défaut aux icônes, sauf si l'icône avait le mot-clé -precomposed.png comme suffixe. Internet Explorer <meta http-equiv=X-UA-Compatible content=IE=edge> Empêcher IE d'utiliser le mode de compatibilité
<meta name=MobileOptimized content=320″> La balise de largeur de définition définie par Microsoft pour la version IE Mobile
Le navigateur n'ajustera pas automatiquement la taille du fichier, ce qui signifie qu'il s'agit d'une taille fixe et qu'il ne s'étirera pas ou ne s'adaptera pas au navigateur.
<meta name=HandheldFriendly content=true /> : que ce soit convivial pour les appareils portables, uniquement vrai ou faux
<meta name=screen-orientation content=portrait> Forcer l'écran vertical
<meta name=full-screen content=yes> Forcer le plein écran
<meta name=browsermode content=application> Mode application
<meta name=x5-orientation content=portrait> Forcer l'écran vertical
<meta name=x5-fullscreen content=true> Forcer le plein écran
<meta name=x5-page-mode content=app> Mode application
<meta name=renderer content=webkit> Activer le mode rapide
La méta fait référence à l'élément qui fournit des méta-informations sur la page, telles que des descriptions et des mots-clés pour les moteurs de recherche et la fréquence de mise à jour. La balise est située en tête du document et ne contient aucun contenu. Les propriétés d'une balise définissent les paires nom/valeur associées au document.
Quelles sont les fonctionnalités uniques à la version mobile ?<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>
La première balise méta signifie : forcer la largeur du document à la largeur de l'appareil à rester 1:1, et le rapport de largeur maximum du document est de 1,0, et les utilisateurs ne sont pas autorisés à cliquer sur l'écran pour agrandir la vue ;
La deuxième balise méta est la balise méta privée Safari dans l'appareil iPhone, ce qui signifie : autoriser la navigation en mode plein écran ;
La troisième balise méta est également une balise privée de l'iPhone, qui spécifie le style de la barre d'état en haut de Safari sur iPhone ;
La couleur de la barre d'état (barre supérieure de l'écran) dans les applications web app ;
La valeur par défaut est default (blanc), qui peut être définie sur noir (noir) et noir-translucide (gris translucide).
Remarque : si la valeur est noire-translucide, elle occupera la position px de la page et flottera au-dessus de la page (elle couvrira la hauteur de 20 px de la page – l'écran Retina de l'iphone4 et de l'itouch4 est de 40 px).La quatrième balise méta signifie : Dites à l'appareil d'ignorer les numéros sur la page en tant que numéros de téléphone.
Jetons un coup d'oeil à la méta des pages mobiles des grands constructeurs : 1. Petit petit<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 content=initial-scale=0,5, maximum-scale=0,5, minimum-scale=0,5, user-scalable=no>3. Jingdong
<title>Version Jingdong-Mobile</title><meta name=viewport content=width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;><meta http-equiv=Content -Tapez 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=Expire le contenu=-1><meta http-equiv= Cache-Control content=no-cache><meta http-equiv=Pragma content=no-cache><meta name=Mots clés 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 = télé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 nom = détection de format content = téléphone = non>6. Sohu
<title>Mobile Sohu.com</title> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /><meta http-equiv=Cache-Control content=no-cache />< méta nom=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= />
----
Simuler une page Web mobile<meta name=viewport content=width=device-width,user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0″>
fenêtre -> fenêtre (zone d'affichage)
width=largeur de l'appareil largeur de l'appareil
fenêtre<metaname = 'viewport 'content = width=320><metaname = 'viewport 'content = width=device-width>
user-scalable=no/0 s'il faut autoriser la mise à l'échelle
échelle initiale = 1,0 valeur initiale
échelle maximale = 1,0
échelle minimale = 1,0
--------------------------
<meta name=viewport content=width=device-width, user-scalable=no>
user-scalable=no/0 empêche les utilisateurs de redimensionner la page
<meta name=viewport content=width=device-width, user-scalable=no, initial-scale=1.0″>
initial-scale=1.0 initialiser le taux de zoom de la page
<meta name=viewport content=width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″>
maximum-scale=1,0 rapport de mise à l'échelle maximum (pour les téléphones mobiles individuels Huawei Meta8)
--------------------------
Méta spécifique à l'appareil Apple :<!—Autoriser les pages Web à s'exécuter en tant qu'applications (autoriser l'ajout à l'écran d'accueil)—><meta name=apple-mobile-web-app-capable content=yes><!—Couleur de la barre d'état—><meta name=apple- mobile -web-app-status-bar-style content=black>Méta Jingdong :
<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><!—Numéros de téléphone et adresses e-mail interdits—><meta name=format-detection content=téléphone=non,email=non>Méta Taobao :
<meta content=yes name=apple-mobile-web-app-capable><!–Cliquez sur la zone de la page pour l'afficher en plein écran—><meta content=yes name=apple-touch-fullscreen/><meta content=telephone =no,email =no name=format-detection/><!–Informations sur l'application, conservation de l'historique du système, effets de mouvement–><meta name=App-Config content=fullscreen=yes,useHistoryState=yes,transition=yes/>Autre méta :
<!–Forcer le navigateur 360 à utiliser le noyau Chrome pour afficher la page–><meta name=renderer content=webkit><!–Essayez d'utiliser le dernier mode d'IE pour afficher–><meta http-equiv=X-UA -Compatible content=IE= edge><!–Optimisé pour les appareils portables, principalement pour certains anciens navigateurs qui ne reconnaissent pas les fenêtres d'affichage, comme BlackBerry–><meta name=HandheldFriendly content=true><!–Ancien navigateur de Microsoft–><meta name=MobileOptimized content=320″><!– uc force l'écran vertical–><meta name=screen-orientation content=portrait><!– QQ force l'écran vertical –><meta name=x5-orientation content=portrait><!– UC force le plein écran–><meta name=full-screen content=yes><!– QQ force le plein écran–><meta name=x5-fullscreen content=true><!– Mode d'application UC–><meta name=browsermode content=application><!– Mode d'application QQ–><meta name=x5-page- mode contenu = application>Résumer
Ce qui précède représente l'intégralité du contenu de cet article. J'espère que le contenu de cet article aura une certaine valeur de référence pour les études ou le travail de chacun. Si vous avez des questions, vous pouvez laisser un message de communication. Merci pour votre soutien à VeVb Wulin. Réseau.