Tout le monde connaît très bien la balise méta dans les mises en page Web sur les plateformes 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 des méta sur les plateformes mobiles. , quels sont les effets magiques des balises méta sur les plateformes mobiles ?
1. La fenêtre d'affichage de Meta
En parlant de balises méta de plateforme mobile, nous devons parler de viewport. Alors, qu'est-ce que viewport ?
Viewport est la zone visuelle. Pour les navigateurs de bureau, viewport 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
Meta Viewport</title> ;<br /><style type="text/css"><br>div,body{<br>padding:0;<br>margin:0;<br>}<br>body {<br>padding -top:100px;<br>color:#fff;<br>}<br>div{<br>width:320px;<br>height:100px;<br>margin:0 auto;<br>arrière-plan :# 000;<br>text-align:center;<br>font:30px/100px Arial;<br>}<br></style><br></head><br>< ;body><br><div><br>AppUE<br></div><br></body><br></html><br>
</div>
<p>Nous devons donc changer la fenêtre d'affichage. Nous avons les valeurs d'attribut suivantesqui peuvent être définies : </p>
<p>largeur : largeur de la fenêtre (plage de 200 à 10 000, la valeur par défaut est 980 pixels) <br>hauteur : hauteur de la fenêtre (plage de 223 à 10 000) <br>échelle initiale : mise à l'échelle initiale (plage de > ;0 à 10)<br>échelle minimale : le rapport minimum sur lequel l'utilisateur est autorisé à zoomer<br>échelle maximale : le rapport maximum sur lequel l'utilisateur est autorisé à zoomer<br>évolutif par l'utilisateur : si le l'utilisateur peut zoomer manuellement</p>
<p>Pour ces attributs, nous pouvons en définir un ou plusieurs, et vous n'avez pas besoin de 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 de. directement en utilisant les valeurs par défaut. </p>
<p>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 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, sous la forme : </p>
<p><br></p>
<div class="msgheader">
<div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode21'));"><u>Copier le code</u></span></div>Le code est le suivant :</div>
<div class="msgborder" id="phpcode21">
<br><meta name=” viewport" content = "width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"
<br />D'accord, nous pouvons mettre notre page en plein écran, plus besoin de nous soucier de l'affichage de la page très petite ! </div>
</p>2. Détection du méta-format<p></p><p><br /><br><div class="msgheader">Copier le code<div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode22'));"><u>Le code est le suivant :</u></span> </div><meta name=”format-detection” content=”telephone=no” /></div>
<div class="msgborder" id="phpcode22">
<br>
<br>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 ? A ce moment, notre méta devrait à nouveau montrer son pouvoir magique. Le code est le suivant : </div>.
telephone=no désactive la conversion des numéros en liens d'accès à distance ! <p>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 ! </p>
<p>3. Apple-mobile-web-app-capable de Meta<br></p>
<p><br><br></p>
<div class="msgheader">Copiez le code<div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode23'));"><u>Le code est le suivant :</u></span></div><meta name=”apple-mobile-web-app-capable” content=”yes” /></div>
<div class="msgborder" id="phpcode23">
<p>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. </p>
<p>4. Méta du style apple-mobile-web-app-status-bar<br><br></p>
<div class="msgheader">
<div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode24'));"><u>Copier le code</u></span></div>code Comme suit :</div>
<div class="msgborder" id="phpcode24">
<br><meta name=”apple-mobile-web-app-status-bar-style” content=”default” /><br><meta name=”apple - mobile-web-app-status-bar-style” content=”black” /><br><meta name=”apple-mobile-web-app-status-bar-style” content=”black-translucide " /><br>
</div>
<br> est utilisé pour contrôler le style d'affichage de la barre d'état<br><br><div class="msgheader">
<div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode25'));"><u>Copier le code</u></span></div>Le code est le suivant :</div>
<div class="msgborder" id="phpcode25">
<br>status-bar-style:black<br>status-bar-style:black-translucent<br>
</div>
</div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Déclaration：</span><div>Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn</div></div></div><div class="nphpSytBox"><span>Article précédent：<a class="dBlack" title="Étapes détaillées pour intégrer des cartes Baidu dans des pages Web et personnaliser des cartes à l'aide de la production de pages Baidu Map API_HTML/Xhtml_Web" href="https://m.php.cn/fr/faq/11219.html">Étapes détaillées pour intégrer des cartes Baidu dans des pages Web et personnaliser des cartes à l'aide de la production de pages Baidu Map API_HTML/Xhtml_Web</a></span><span>Article suivant：<a class="dBlack" title="Étapes détaillées pour intégrer des cartes Baidu dans des pages Web et personnaliser des cartes à l'aide de la production de pages Baidu Map API_HTML/Xhtml_Web" href="https://m.php.cn/fr/faq/11224.html">Étapes détaillées pour intégrer des cartes Baidu dans des pages Web et personnaliser des cartes à l'aide de la production de pages Baidu Map API_HTML/Xhtml_Web</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Articles Liés</h2><em><a href="https://m.php.cn/fr/article.html" class="bBlack"><i>Voir plus</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-6t+ed+2i-1n-4w"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/fr/faq/348757.html" title="Résumé des connaissances HTML" class="aBlack">Résumé des connaissances HTML</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/348804.html" title="Comment apprendre le HTML rapidement" class="aBlack">Comment apprendre le HTML rapidement</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/348873.html" title="La différence entre htmlxhtmlxml" class="aBlack">La différence entre htmlxhtmlxml</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/348884.html" title="La différence entre les attributs src et href" class="aBlack">La différence entre les attributs src et href</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/348902.html" title="关于HTML5和CSS替换使用" class="aBlack">关于HTML5和CSS替换使用</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！</p></div><div class="footermid"><a href="https://m.php.cn/fr/about/us.html">À propos de nous</a><a href="https://m.php.cn/fr/about/disclaimer.html">Clause de non-responsabilité</a><a href="https://m.php.cn/fr/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved
</p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //选择器
_iIntervalID; //定时器id
if( this.length ){ //如果已经获取到了，就直接执行函数
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正数就 --
_self = $(_selector); //再次选择
if( _self.length ) { //判断是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}
$("table.syntaxhighlighter").wait(function() {
$('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
$(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body><!-- Matomo --><script> var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="https://tongji.php.cn/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '9']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script><!-- End Matomo Code --></html>
