L'effet magique des compétences du didacticiel mobile html5 meta tag_html5

Lors de la création d'un site Web mobile, en plus de la simplicité de la page et de la facilité d'utilisation, etc., que les visiteurs peuvent voir, c'est le réglage des balises Meta. Un réglage correct des balises Meta améliorera l'optimisation des moteurs de recherche du mobile. le site Web et le rendu des navigateurs mobiles sont très utiles. Tout le monde connaît très bien la balise méta dans la mise en page Web de la plateforme de bureau. Elle est toujours située à l'intérieur de l'élément head. Les amis qui font du référencement doivent avoir un sens particulier pour la méta. Aujourd'hui, nous allons parler de la balise méta de la plateforme mobile. . Quels sont les effets magiques des balises méta sur les plateformes mobiles ?
1. Fenêtre d'affichage de Meta
En ce qui concerne les balises méta de plate-forme mobile, nous devons parler de fenêtre d'affichage Alors, qu'est-ce que la fenêtre d'affichage ?
Viewport est la zone visuelle. Pour les navigateurs de bureau, la fenêtre d'affichage fait référence à la zone utilisée pour afficher les pages Web après avoir supprimé toutes les barres d'outils, barres d'état, barres de défilement, etc.
. Pour les pages WEB traditionnelles, il est normal que la largeur de 980 soit affichée sur l'iPhone, et elle remplit également l'écran. Mais pour les webapps, cela peut poser un peu problème. Sur les iPhones, nos webapps ont généralement une largeur de . 100cm en mode portrait 320, quel effet affichera notre page 320 sur l'iPhone ? Certaines personnes peuvent penser que l'iPhone ne fait pas 320 mm de large, il devrait remplir l'écran, n'est-ce pas ? Jetons un coup d'œil à la façon dont la disposition suivante apparaît sur l'iPhone

Copiez le code

Le code est le suivant :

Meta Viewport ;corps>

AppUE

Nous devons donc changer la fenêtre d'affichage, nous avons les valeurs d'attribut suivantes qui peuvent être définies :

width : la largeur de la fenêtre d'affichage (allant de 200 à 10 000, la valeur par défaut est de 980 pixels)
hauteur : la hauteur de la fenêtre (allant de 223 à 10 000)
échelle initiale : mise à l'échelle initiale (allant de > 0 à 10)
échelle minimale : l'échelle minimale à laquelle l'utilisateur est autorisé à zoomer to
maximum-scale : l'échelle maximale sur laquelle l'utilisateur est autorisé à zoomer
user-scalable : si l'utilisateur peut zoomer manuellement
Pour ces attributs, nous pouvons en définir un ou plusieurs. Vous ne le faites pas. Vous devez les définir tous en même temps. L'iPhone calculera automatiquement d'autres valeurs d'attribut en fonction des attributs que vous définissez, au lieu d'utiliser simplement la valeur par défaut.

Si vous définissez initial-scale=1, alors la largeur et la hauteur seront automatiquement de 320*356 en mode portrait (et non de 320*480 car la barre d'adresse, etc. occupent toutes de l'espace), et de 480*208 en mode paysage. De même, si vous définissez uniquement la largeur, l'échelle initiale et la hauteur seront automatiquement calculées. Par exemple, si vous définissez la largeur = 320, l'échelle initiale est de 1 lorsque l'écran est en mode portrait et devient 1,5 lorsque l'écran est en orientation paysage. Alors, comment ces paramètres permettent-ils à Safari de le savoir ? En fait, c'est très simple, juste une méta, sous la forme :



Copiez le code


Le code est tel suit :

D'accord, nous pouvons mettre notre page en plein écran, plus besoin de nous soucier de l'affichage de la page très petite ! 2. Détection du méta-format

Copier le code
Le code est le suivant :

Vous avez clairement écrit une chaîne de chiffres sans ajouter de style de lien, mais l'iPhone ajoutera automatiquement un style de lien à votre texte, et cliquer sur le numéro composera automatiquement le numéro ! Comment supprimer ce lien d'accès à distance ? À ce moment-là, notre méta devrait à nouveau montrer sa magie. Le code est le suivant :
telephone=no interdit la conversion de numéros en liens d'accès commuté !
telephone=yes permet la conversion des numéros en liens d'accès commuté. Pour activer la fonction de conversion, il n'est pas nécessaire d'écrire cette méta. Elle est activée par défaut !

3. Méta de Apple-mobile-web-app-capable

La fonction de cette méta est de supprimer la barre d'outils et la barre de menu Apple par défaut. le contenu a deux valeurs "oui" et "non". Lorsque nous devons afficher la barre d'outils et la barre de menus, il n'est pas nécessaire d'ajouter cette ligne de méta. La valeur par défaut est de l'afficher.
4. Méta du style apple-mobile-web-app-status-bar

Copiez le code

Le code est le suivant :

Copiez le code

Le code est le suivant :

status-bar-style:black

status-bar-style:black-translucent

Aujourd'hui, je vais parler brièvement des balises Meta qui doivent être ajouté à la version mobile du site :

viewport
viewport est presque un standard reconnu Il a été créé à l'origine par Apple pour la version mobile de. Safari sur iPhone. En raison du gros vendeur, accepté par la plupart des autres navigateurs mobiles, tels que Opera Mobile, iPhone, Android, Iris, IE, BlackBerry, Obigo, Firefox L'exemple le plus basique, rendant le site en pleine largeur d'écran. sur mobile :

Copier le code

Le code est le suivant :

HandheldFriendly

Cette étiquette et MobileOptimized ont été introduites Vous trouverez ci-dessous des étiquettes de facto à l’ère des machines à fonctionnalités. La balise
HandheldFriendly a d'abord été utilisée pour marquer le contenu mobile dans la navigation AvantGo, puis est devenue une norme universelle pour le marquage des sites mobiles, mais la prise en charge de cette balise est inconnue.

Copier le code

Le code est le suivant :

MobileOptimized

Il s'agit d'une balise méta spécifique à Windows qui est finalement devenue une autre méthode d'identification du contenu mobile, mais l'inconvénient de cette balise est qu'elle est La largeur doit être donné, et encore une fois, le support de cette balise est inconnu :

Copiez le code

Le code est le suivant :