Jeder ist mit dem Meta-Tag in Web-Layouts auf Desktop-Plattformen bestens vertraut. Freunde, die SEO betreiben, müssen ein besonderes Gespür für Meta-Tags haben , welche magischen Auswirkungen haben Meta-Tags auf mobilen Plattformen?
1. Metas Ansichtsfenster
Apropos Meta-Tags für mobile Plattformen: Wir müssen über Ansichtsfenster sprechen. Was ist also Ansichtsfenster?
Ansichtsfenster ist der visuelle Bereich, der zum Anzeigen von Webseiten verwendet wird, nachdem alle Symbolleisten, Statusleisten, Bildlaufleisten usw. entfernt wurden.
Bei herkömmlichen WEB-Seiten ist es normal, dass sie auf dem iPhone mit einer Breite von 980 angezeigt werden, und sie füllen auch den Bildschirm aus. Bei Web-Apps kann dies jedoch ein kleines Problem sein. Auf iPhones haben unsere Web-Apps normalerweise eine Breite von 100 cm im Hochformat. Welchen Effekt hat unsere 320-Seiten-Anzeige auf dem iPhone? Manche Leute denken vielleicht, dass das iPhone nicht 320 mm breit ist, sondern den Bildschirm ausfüllen sollte, oder? Schauen wir uns an, wie das folgende Layout auf dem iPhone aussieht
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>Hintergrund:# 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>Also müssen wir das Ansichtsfenster ändern. Wir haben die folgenden Attributwerte, die festgelegt werden können: </p>
<p>width: Breite des Ansichtsfensters (Bereich von 200 bis 10.000, Standard ist 980 Pixel) <br>height: Höhe des Ansichtsfensters (Bereich von 223 bis 10.000) <br>initial-scale: anfängliche Skalierung (Bereich von > ;0 bis 10)<br>Minimaler Maßstab: Der minimale Maßstab, auf den der Benutzer zoomen darf<br>Maximaler Maßstab: Der maximale Maßstab, auf den der Benutzer zoomen darf<br>Benutzerskalierbar: Ob die Der Benutzer kann manuell zoomen</p>
<p>Für diese Attribute können wir eines oder mehrere davon festlegen, und Sie müssen nicht alle gleichzeitig festlegen. Das iPhone berechnet stattdessen automatisch andere Attributwerte auf der Grundlage der von Ihnen festgelegten Attribute direkt mit den Standardwerten. </p>
<p>Wenn Sie „initial-scale=1“ festlegen, betragen Breite und Höhe automatisch 320*356 im Hochformat (nicht 320*480, da die Adressleiste usw. alle Platz beanspruchen) und 480*208 im Querformat. Wenn Sie nur die Breite festlegen, werden der Anfangsmaßstab und die Höhe automatisch berechnet. Wenn Sie beispielsweise die Breite auf 320 festlegen, beträgt die Anfangsskalierung 1, wenn sich der Bildschirm im Hochformat befindet, und beträgt 1,5, wenn sich der Bildschirm im Querformat befindet. Wie informieren diese Einstellungen Safari darüber? Tatsächlich ist es ganz einfach, nur ein Meta, in der Form: </p>
<p><br></p>
<div class="msgheader">
<div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode21'));"><u>Code kopieren</u></span></div>Der Code lautet wie folgt:</div>
<div class="msgborder" id="phpcode21">
<br><meta name=“ viewport“ content =“width=device-width; initial-scale=1.0;“ /><br>
</div>
<p>Okay, wir können unsere Seite im Vollbildmodus gestalten und müssen uns keine Sorgen mehr machen, dass die Seite sehr klein angezeigt wird! </p>
<p>2. Metaformaterkennung<br><br></p>
<div class="msgheader">
<div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode22'));"><u>Code kopieren</u></span></div>Der Code lautet wie folgt:</div>
<div class="msgborder" id="phpcode22"> <br><meta name=“format-detection“ content=“telephone=no“ /><br>
</div>
<p>Sie haben eindeutig eine Zahlenfolge geschrieben, ohne einen Link-Stil hinzuzufügen, aber das iPhone fügt Ihrem Text automatisch einen Link-Stil hinzu, und wenn Sie auf die Nummer klicken, wird die Nummer automatisch gewählt! Wie entferne ich diesen DFÜ-Link? Zu diesem Zeitpunkt sollte unser Meta erneut seine magische Kraft zeigen. Der Code lautet wie folgt: </p>
<p>telephone=no deaktiviert die Umwandlung von Nummern in Einwahllinks! <br>telephone=yes ermöglicht die Konvertierung von Nummern in DFÜ-Links. Um die Konvertierungsfunktion zu aktivieren, ist es nicht erforderlich, dieses Meta zu schreiben. Es ist standardmäßig aktiviert. </p>
<p>3. Metas Apple-Mobile-Web-App-fähig<br><br></p>
<div class="msgheader">
<div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode23'));"><u>Kopieren Sie den Code</u></span></div>Der Code lautet wie folgt :</div>
<div class="msgborder" id="phpcode23">
<br><meta name=“apple-mobile-web-app-capable“ content=“yes“ /><br>
</div>
<p>Die Funktion dieses Metas besteht darin, die standardmäßige Apple-Symbolleiste und Menüleiste zu löschen. Der Inhalt hat zwei Werte: „Ja“ und „Nein“. Wenn wir die Symbolleiste und die Menüleiste anzeigen müssen, ist es nicht erforderlich, diese Metazeile hinzuzufügen. </p>
<p>4. Meta des Apple-Mobile-Web-App-Statusleistenstils<br><br></p>
<div class="msgheader">
<div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode24'));"><u>Code kopieren</u></span></div>Code Wie folgt:</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-translucent ” /><br>
</div>
<br> wird verwendet, um den Anzeigestil der Statusleiste zu steuern<br><br><div class="msgheader">
<div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode25'));"><u>Code kopieren</u></span></div>Der Code lautet wie folgt:</div>
<div class="msgborder" id="phpcode25">
<br>status-bar-style:black<br>status-bar-style:black-translucent<br>
</div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Stellungnahme：</span><div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn</div></div></div><div class="nphpSytBox"><span>Vorheriger Artikel：<a class="dBlack" title="Detaillierte Schritte zum Einbetten von Baidu-Karten in Webseiten und zum Anpassen von Karten mithilfe der Baidu Map API_HTML/Xhtml_Webseitenproduktion" href="https://m.php.cn/de/faq/11219.html">Detaillierte Schritte zum Einbetten von Baidu-Karten in Webseiten und zum Anpassen von Karten mithilfe der Baidu Map API_HTML/Xhtml_Webseitenproduktion</a></span><span>Nächster Artikel：<a class="dBlack" title="Detaillierte Schritte zum Einbetten von Baidu-Karten in Webseiten und zum Anpassen von Karten mithilfe der Baidu Map API_HTML/Xhtml_Webseitenproduktion" href="https://m.php.cn/de/faq/11224.html">Detaillierte Schritte zum Einbetten von Baidu-Karten in Webseiten und zum Anpassen von Karten mithilfe der Baidu Map API_HTML/Xhtml_Webseitenproduktion</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="https://m.php.cn/de/article.html" class="bBlack"><i>Mehr sehen</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/de/faq/348757.html" title="Zusammenfassung der HTML-Kenntnisse" class="aBlack">Zusammenfassung der HTML-Kenntnisse</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/348804.html" title="So lernen Sie schnell HTML" class="aBlack">So lernen Sie schnell HTML</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/348873.html" title="Der Unterschied zwischen HTML xHTML XML" class="aBlack">Der Unterschied zwischen HTML xHTML XML</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/348884.html" title="Der Unterschied zwischen src- und href-Attributen" class="aBlack">Der Unterschied zwischen src- und href-Attributen</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/348902.html" title="Über die Verwendung von HTML5 und CSS-Ersatz" class="aBlack">Über die Verwendung von HTML5 und CSS-Ersatz</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>Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！</p></div><div class="footermid"><a href="https://m.php.cn/de/about/us.html">Über uns</a><a href="https://m.php.cn/de/about/disclaimer.html">Haftungsausschluss</a><a href="https://m.php.cn/de/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>
