Exemples d'application des balises méta dans le développement de plateformes mobiles-tutoriel HTML-php.cn

Exemples d'application des balises méta dans le développement de plateformes mobiles

高洛峰

Libérer： 2017-03-03 16:21:44

original

1127 Les gens l'ont consulté

Cet article présente principalement l'application détaillée des balises méta dans le développement de plates-formes mobiles. Les amis qui en ont besoin peuvent s'y référer

Tout le monde connaît très bien la balise méta dans la mise en page Web de la plate-forme de bureau. situé dans l'élément head, les amis SEO doivent avoir un sens particulier pour la méta. Aujourd'hui, nous allons parler de la balise méta de la plateforme mobile. Quels effets magiques la balise méta a-t-elle sur la plateforme mobile ?

1. La fenêtre d'affichage de Meta

En parlant de balises méta de plateforme 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 à l'affichage de la mise en page suivante sur l'iPhone

Le code est le suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Meta Viewport</title>
<style type="text/css">
p,body{
padding:0;
margin:0;
}
body{
padding-top:100px;
color:#fff;
}
p{
width:320px;
height:100px;
margin:0 auto;
background:#000;
text-align:center;
font:30px/100px Arial;
}
</style>
</head>
<body>
<p>
AppUE
</p>
</body>
</html>

Copier après la connexion

Il faut donc changer la fenêtre d'affichage, et nous avons ce qui suit valeurs d'attributà définir :

largeur : largeur de la fenêtre (plage de 200 à 10 000, la valeur par défaut est 980 pixels)
hauteur : hauteur de la fenêtre (plage de 223 à 10 000)
échelle initiale : mise à l'échelle initiale (plages de > 0 à 10)
échelle minimale : l'échelle minimale sur laquelle l'utilisateur est autorisé à zoomer
échelle maximale : l'échelle maximale sur laquelle l'utilisateur est autorisé à zoomer
évolutif par l'utilisateur : si l'utilisateur peut zoomer manuellement

Pour ces attributs, nous pouvons en définir un ou plusieurs. Vous n'avez pas besoin de les définir tous en même temps. L'iPhone calculera automatiquement d'autres attributs. valeurs basées sur les attributs que vous définissez, plutôt que d'utiliser directement les valeurs 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. mode. 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 width=320, l'échelle initiale est de 1 lorsque l'écran est en mode portrait et elle devient 1,5 lorsque l'écran est en mode paysage. Alors, comment ces paramètres permettent-ils à Safari de le savoir ? En fait, c'est très simple, juste une méta, en forme de :

Le code est le suivant :

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

Copier après la connexion

Bon, on peut mettre notre page en plein écran, plus besoin de se soucier de l'affichage de la page Très petit !

2. La détection du format de Meta

Le code est le suivant :

<meta name=”format-detection” content=”telephone=no” />

Copier après la connexion

Vous avez clairement écrit une chaîne de nombres sans ajouter un style de lien, mais l'iPhone ajoutera automatiquement un style de lien à votre texte et cliquera sur le numéro pour composer automatiquement le numéro ! Comment supprimer ce lien d'accès à distance ? À ce moment-là, notre méta devrait à nouveau montrer son pouvoir magique. 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 commutés. 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

Le code est le suivant :

<meta name=”apple-mobile-web-app-capable” content=”yes” />

Copier après la connexion

La fonction de ceci méta consiste à supprimer la barre d'outils et la barre de menus 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. Le style apple-mobile-web-app-status-bar-style de Meta

Le code est le suivant :

<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=”black-translucent” />

Copier après la connexion

La fonction est de contrôler le style d'affichage de la barre d'état

Le code est le suivant :

status-bar-style:black
status-bar-style:black-translucent

Copier après la connexion

Pour plus d'exemples d'application de balises méta dans la plateforme mobile développement, veuillez faire attention au site Web PHP chinois pour les articles connexes !