웹 모바일로 보기, 화면크기 자동조정 메타태그

사용자가 만든 웹페이지를 모바일 환경에서 화면크기에 맞게 자동조정이 필요한 경우라면 meta 태그를 적용하는것만으로 웹브라우저를 열어볼떄에 최적화된 화면으로 볼수가 있습니다.

웹을 모바일 화면에서 보기

모바일화면에 웹을 보기 위해서는 크롬 브라우저에서 F12 단축키로 콘솔도구를 열고 모바일아이콘 모양의 Toggle device toolbar 단축키 Ctrl + Shift + M 키를 누르시면 됩니다.

html 예제 웹페이지

아래는 기본 웹페이지를 예제를 사용하기 위해서 만들어본것으로 title 타이틀, h 태그, a 태그 카테고리를 적용하여 크롬도구로 모바일 화면을 열어보도록 합니다.

 <!DOCTYPE html>
<html>
<head>
  <title>웹 모바일로 보기 - 매타태그</title>
  <meta charset="utf-8">  
</head>
<body>
<h1><a href="index.html">HTML</a></h1>
<ol>
  <li><a href="http://openlec.co.kr/category/wordpress/">WordPress</a></li>
  <li><a href="http://openlec.co.kr/category/css/">CSS<a/></li>
  <li><a href="http://openlec.co.kr/category/php/">PHP</a></li>
  <li><a href="http://openlec.co.kr/category/photoshop/">Photoshop</a></li>
</ol> 
<h2>매타태그 삽입</h2>
</body>
</html>

head 매타태그삽입

head 태그 사이에 name=”viewport” content=”width=device-width 를 삽입하는것 만으로도 모바일 환경에서 자동크기 최적화 화면으로 변경이 되는것을 확인할수가 있습니다.

<!DOCTYPE html>
<html>
<head>
  <title>웹 모바일로 보기 - 매타태그</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1><a href="index.html">HTML</a></h1>
<ol>
  <li><a href="http://openlec.co.kr/category/wordpress/">WordPress</a></li>
  <li><a href="http://openlec.co.kr/category/css/">CSS<a/></li>
  <li><a href="http://openlec.co.kr/category/php/">PHP</a></li>
  <li><a href="http://openlec.co.kr/category/photoshop/">Photoshop</a></li>
</ol> 
<h2>매타태그 삽입</h2> 
head 태그 사이에 name="viewport" content="width=device-width 를 삽입하는것 만으로도 모바일 환경에서 자동크기 최적화 화면으로 변경이 됩니다.
</body>
</html>