デスクトップ プラットフォームの Web レイアウトのメタ タグは、常に head 要素内に配置されていることによく知られています。今日は、モバイル プラットフォームのメタ タグについて説明します。 、モバイル プラットフォームにおけるメタ タグの魔法の効果とは何ですか?
1. メタ ビューポート
モバイル プラットフォームのメタ タグと言えば、ビューポートについて話さなければなりません。それでは、ビューポートとは何でしょうか?
ビューポートは、デスクトップ ブラウザの場合、すべてのツールバー、ステータス バー、スクロール バーなどを削除した後に Web ページを表示するために使用される領域を指します。
。従来の Web ページの場合、iPhone では幅 980 が表示されるのが通常であり、画面全体にも表示されますが、Web アプリの場合、通常、Web アプリの幅は 980 です。ポートレート モードで 100cm、320 の場合、iPhone では 320 のページがどのように表示されますか? iPhoneの幅は320mmではなく、画面いっぱいに収まるはずだと思う人もいるかもしれませんが、実際はどうなのでしょうか？次のレイアウトが iPhone でどのように表示されるかを見てみましょう
メタ ビューポート</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>background:# 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>したがって、ビューポートを変更する必要があります。設定できる属性値は次のとおりです。</p>
<p>width: ビューポートの幅 (200 ～ 10,000 の範囲、デフォルトは 980 ピクセル) <br>height: ビューポートの高さ (223 ～ 10,000 の範囲) <br>initial-scale: 初期スケーリング (> の範囲) ;0 ～ 10)<br>minimum-scale: ユーザーがズームできる最小比率<br>maximum-scale: ユーザーがズームできる最大比率<br>user-scalable:ユーザーは手動でズームできます</p>
<p>これらの属性については、1 つ以上を設定できます。すべてを同時に設定する必要はありません。iPhone は、設定した属性に基づいて他の属性値を自動的に計算します。デフォルト値を直接使用します。 </p>
<p>initial-scale=1 に設定すると、幅と高さはポートレート モードでは自動的に 320*356 (アドレス バーなどがすべてスペースを占めるため 320*480 ではありません)、ランドスケープ モードでは 480*208 になります。同様に、幅のみを設定した場合、初期スケールと高さは自動的に計算されます。たとえば、width=320 に設定した場合、初期スケールは、画面が縦向きモードの場合は 1 ですが、画面が横向きの場合は 1.5 になります。 では、これらの設定はどのようにして Safari に通知されるのでしょうか?実際、これは非常に単純で、次の形式の単なるメタです: </p>
<p><br></p>
<div class="msgheader">
<div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode21'));"><u>コードをコピーします</u></span></div>コードは次のとおりです:</div>
<div class="msgborder" id="phpcode21">
<br><meta name=”ビューポート”コンテンツ =”幅=デバイス幅=1.0;最大スケール=0;”
<br />よし、ページを全画面でレイアウトできるので、ページが非常に小さく表示されることを心配する必要はもうありません。 </div>
</p>2. メタ形式の検出<p></p><p><br /><br><div class="msgheader">コードをコピーします<div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode22'));"><u>コードは次のとおりです:</u></span> </div><meta name=”format-detection” content=”telephone=no” /></div><div class="msgborder" id="phpcode22"><br />
<br />あなたは明らかにリンク スタイルを追加せずに数字の文字列を書きましたが、iPhone は自動的にテキストにリンク スタイルを追加し、番号をクリックすると自動的にその番号にダイヤルします。このダイヤルアップ リンクを削除するにはどうすればよいですか?この時点で、メタはその魔法の力を再び発揮する必要があります。コードは次のとおりです: </div>
</p>telephone=no は、番号をダイヤルアップ リンクに変換することを無効にします。 <p>telephone=yes により、番号をダイヤルアップ リンクに変換できます。変換機能を有効にするために、このメタを記述する必要はありません。デフォルトで有効になっています。 </p>
<p>3. Meta の apple-mobile-web-app-capable<br /></p><p><br /><br><div class="msgheader">コードをコピーします<div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode23'));"><u>コードは次のとおりです:</u></span></div><meta name=”apple-mobile-web-app-capable” content=”yes” /></div><div class="msgborder" id="phpcode23"></p>
<p>このメタの機能は、デフォルトの Apple ツールバーとメニュー バーを削除することです。 content には「yes」と「no」の 2 つの値があります。ツールバーとメニューバーを表示する必要がある場合、デフォルトではこの行を追加する必要はありません。 </p>
<p>4. apple-mobile-web-app-status-bar-style のメタ<br /><br><div class="msgheader"><div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode24'));"><u>コードをコピーします</u></span></div>コード次のように:</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> はステータス バーの表示スタイルを制御するために使用されます<br><br><div class="msgheader">
<div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode25'));"><u>コードをコピー</u></span></div>コードは次のとおりです:</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>声明：</span><div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div></div></div><div class="nphpSytBox"><span>前の記事：<a class="dBlack" title="Baidu マップを Web ページに埋め込み、Baidu Map API を使用してマップをカスタマイズするための詳細な手順_HTML/Xhtml_Web ページの作成" href="http://m.php.cn/ja/faq/11219.html">Baidu マップを Web ページに埋め込み、Baidu Map API を使用してマップをカスタマイズするための詳細な手順_HTML/Xhtml_Web ページの作成</a></span><span>次の記事：<a class="dBlack" title="Baidu マップを Web ページに埋め込み、Baidu Map API を使用してマップをカスタマイズするための詳細な手順_HTML/Xhtml_Web ページの作成" href="http://m.php.cn/ja/faq/11224.html">Baidu マップを Web ページに埋め込み、Baidu Map API を使用してマップをカスタマイズするための詳細な手順_HTML/Xhtml_Web ページの作成</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>関連記事</h2><em><a href="http://m.php.cn/ja/article.html" class="bBlack"><i>続きを見る</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="http://m.php.cn/ja/faq/348757.html" title="HTMLの知識のまとめ" class="aBlack">HTMLの知識のまとめ</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348804.html" title="HTMLを早く学ぶ方法" class="aBlack">HTMLを早く学ぶ方法</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348873.html" title="html xhtml xml の違い" class="aBlack">html xhtml xml の違い</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348884.html" title="src 属性と href 属性の違い" class="aBlack">src 属性と href 属性の違い</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/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>福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！</p></div><div class="footermid"><a href="http://m.php.cn/ja/about/us.html">私たちについて</a><a href="http://m.php.cn/ja/about/disclaimer.html">免責事項</a><a href="http://m.php.cn/ja/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></html>
