데스크톱 플랫폼의 웹 레이아웃에 있는 메타 태그는 모두가 잘 알고 있습니다. 이 태그는 항상 head 요소 안에 있습니다. SEO를 하는 친구들은 틀림없이 모바일 플랫폼의 메타에 대해 이야기할 것입니다. , 모바일 플랫폼에서 메타 태그의 마법적인 효과는 무엇입니까?
1. 메타 뷰포트
모바일 플랫폼 메타태그에 관해 이야기하자면 뷰포트(viewport)란 무엇일까요?
뷰포트는 데스크톱 브라우저의 경우 도구 모음, 상태 표시줄, 스크롤 막대 등을 모두 제거한 후 웹 페이지를 보는 데 사용되는 영역을 의미합니다.
기존 WEB 페이지의 경우 iPhone에서는 너비가 980으로 표시되는 것이 일반적이며 화면도 꽉 채웁니다. 그러나 웹앱의 경우에는 약간 문제가 될 수 있습니다. 세로 모드에서 100cm, 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>배경:# 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>이러한 속성에 대해 하나 이상의 속성을 설정할 수 있으며 동시에 모두 설정할 필요는 없습니다. 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><메타 이름=” 뷰포트” 내용 =”width=device-width; 초기 규모=1.0; user-scalable=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><메타 이름=”형식-감지” 콘텐츠=”전화=아니요” /></div>
<div class="msgborder" id="phpcode22">
<br>
<br>링크 스타일을 추가하지 않고 숫자열을 명확하게 썼는데, 아이폰은 자동으로 텍스트에 링크 스타일을 추가하고, 숫자를 클릭하면 자동으로 해당 번호로 전화가 걸립니다! 이 전화 접속 링크를 제거하는 방법은 무엇입니까? 이때 우리 메타는 다시 그 마법의 힘을 과시해야 합니다. 코드는 다음과 같습니다. </div>
telephone=no는 번호를 전화 접속 링크로 변환하는 것을 비활성화합니다! <p>telephone=yes를 사용하면 숫자를 전화 접속 링크로 변환할 수 있습니다. 변환 기능을 활성화하려면 이 메타를 작성할 필요가 없습니다. 기본적으로 활성화되어 있습니다. </p>
<p>3. 메타의 apple-mobile-web-app 가능<br></p>
<p><br><br></p>
<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>이 메타의 기능은 기본 Apple 도구 모음과 메뉴 표시줄을 삭제하는 것입니다. 콘텐츠에는 "yes"와 "no"라는 두 가지 값이 있습니다. 도구 모음과 메뉴 표시줄을 표시해야 하는 경우 이 메타 줄을 추가할 필요가 없습니다. 기본값은 표시하는 것입니다. </p>
<p>4. apple-mobile-web-app-status-bar-style의 메타<br><br></p>
<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><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 지도를 웹 페이지에 삽입하고 Baidu Map API_HTML/Xhtml_웹 페이지 제작을 사용하여 지도를 사용자 정의하는 세부 단계" href="http://m.php.cn/ko/faq/11219.html">Baidu 지도를 웹 페이지에 삽입하고 Baidu Map API_HTML/Xhtml_웹 페이지 제작을 사용하여 지도를 사용자 정의하는 세부 단계</a></span><span>다음 기사：<a class="dBlack" title="Baidu 지도를 웹 페이지에 삽입하고 Baidu Map API_HTML/Xhtml_웹 페이지 제작을 사용하여 지도를 사용자 정의하는 세부 단계" href="http://m.php.cn/ko/faq/11224.html">Baidu 지도를 웹 페이지에 삽입하고 Baidu Map API_HTML/Xhtml_웹 페이지 제작을 사용하여 지도를 사용자 정의하는 세부 단계</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="http://m.php.cn/ko/article.html" class="bBlack"><i>더보기</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ko/faq/348757.html" title="HTML 지식 요약" class="aBlack">HTML 지식 요약</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/348804.html" title="HTML을 빨리 배우는 방법" class="aBlack">HTML을 빨리 배우는 방법</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/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/ko/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/ko/faq/348902.html" title="HTML5 및 CSS 대체 사용 정보" class="aBlack">HTML5 및 CSS 대체 사용 정보</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/ko/"><b class="icon1"></b><p>집</p></a></li><li><a href="http://m.php.cn/ko/course.html"><b class="icon2"></b><p>강의</p></a></li><li><a href="http://m.php.cn/ko/wenda.html"><b class="icon4"></b><p>Q&A</p></a></li><li><a href="http://m.php.cn/ko/login"><b class="icon5"></b><p>나의</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/ko/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/ko/"><b class="icon1"></b><span>집</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/course.html"><b class="icon2"></b><span>강의</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/article.html"><b class="icon3"></b><span>기사</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/wenda.html"><b class="icon4"></b><span>Q&A</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/dic.html"><b class="icon6"></b><span>사전</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/course/type/99.html"><b class="icon7"></b><span>수동</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/xiazai/"><b class="icon8"></b><span>다운로드</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/faq/zt" title="주제"><b class="icon12"></b><span>주제</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/ko/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/ko/" >집</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/article.html" class="hover">기사</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/wenda.html" >Q&A</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/course.html" >강의</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/faq/zt" >주제</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/xiazai" >다운로드</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/game" >게임</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/dic.html" >사전</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', {
slidesPerView : 'auto',
observer: true,//修改swiper自己或子元素时，自动初始化swiper
observeParents: true,//修改swiper的父元素时，自动初始化swiper
});
</script></div></div><!--顶部导航 end--><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>