개요
모바일 웹 페이지를 구현하기 위한 기본적인 기술에 대하여 알아봅니다. 일반 웹 페이지를 구현하는 기본적인 방법을 이용하여 약간의 방법만 추가한다면 손쉽게 모바일 웹 페이지를 구현할 수 있습니다. (사용 모바일 브라우저 : 모바일 사파리)
문제점 및 결과
04 |
<meta http-equiv="content-type" content="text/html;charset=utf-8" /> |
05 |
<title>모바일 페이지를 구현하기 - viewport meta tag</title> |
위에 작성 된 마크업 페이지를 모바일 사파리로 접속하였습니다. 모바일 브라우저에 맞지 않게 글자가 너무 작게 출력되어 확대를 하지 않으면 볼 수가 없습니다. 이는 width값이 적절하게 표현되지 않은 문제에서 비롯됩니다. 작은 화면에서 일반 웹 페이지와 동일하게 렌더링되어 보여주기 때문입니다.
해결 방법
해결 방법은 아주 간단합니다. viewport meta tag를 head 영역에 삽입하면, 위에 보여지던 문제점은 해결할 수 있습니다.
HTML - viewport meta tag
1 |
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> |
결과
viewport meta tag를 삽입함으로써, 모바일 사파리에서 확대하지 않고도 폰트를 확인할 수 있습니다.
viewort meta tag 상세보기
| 속성명 |
설명 |
| 속성명 |
설명 |
| width |
뷰 포트의 픽셀 가로 길이를 지정. 가로 길이를 지정하지 않으면 데스크탑 사이즈로 지정.
(모바일 사파리의 경우는 980픽셀로 지정됨.) |
| height |
뷰 포트의 픽셀 세로 길이를 지정. 일반적으로, 이 속성에 대한 지정은 하지 않아도 무관 함. |
| initial-scale |
처음 모바일 페이지가 보여질 때 페이지 배율을 지정. (0~10.0)
(1.0으로 설정하는 것이 안정적임.)
값이 크면 확대, 값이 작으면 축소 |
| minimum-scale |
사용자가 축소할 수 있는 최소 배율을 지정. (0~10.0)
모바일 사파리는 기본으로 0.25로 설정. |
| maximum-scale |
사용자가 확대할 수 있는 최대 배율을 지정. (0~10.0)
모바일 사파리는 기본으로 1.6으로 설정. |
| user-scalable |
사용자가 배율을 확대 또는 축소 허용 여부를 설정.
모바일 사파리는 기본으로 '사용 함'으로 설정. |
viewport가 지원되지 않을 때.
불행하게도 viewport는 모든 모바일 브라우저에서 지원되지 않습니다. 이러한 경우에는 다른 meta tag를 사용하는 것도 방법 중 하나입니다.
또 다른 meta tag
1 |
<meta name="HandheldFriendly" content="true"/> |
2 |
<meta name="MobileOptimized" content="320"/> |