viewport meta 태그

모바일 웹 제작시 meta태그 설정

 

배경설명EDIT

Fenec과 같은 모바일 브라우저들은 뷰포트(viewport)로 알려진 가상 "window"상에 페이지를 렌더링하는데, 보통의 경우 스크린 보다 폭이 넓어 모든 페이지 레이아웃을 억지로 작은 화면에 축소할 필요가 없다. (레이아웃을 축소할 경우 모바일 사이트로 만들지 않은 사이트들은 대개 엉망이 되게 마련이다.) 사용자들은 화면을 움직이거나 줌 기능을 이용해 페이지의 보이지 않는 부분들을 볼 수 있다.

모바일 Safari는 "viewport meta" 태그를 도입해서 웹 개발자들이 뷰포트의 크기와 스케일을 조정할 수 있게 했고, 웹 표준은 아니지만 많은 다른 모바일 브라우저들도 이 태그를 이제 지원한다. 애플의 문서를 통해 이 태그의 사용법을 자세히 알 수 있기는 하지만 Fenec내에서 정확히 어떻게 구현해야 할 것인가에 대해 상당한 연구가 진행되어야 했다. 예를 들어 사파리의 문서에는 페이지 컨텐트를 "comma-delimited list"라고 쓰고 있는데, 현존하는 브라우저와 웹페이지는 comma, semicolon, 그리고 space의 다양한 조합을 사용한다.

다양한 브라우저내의 뷰포트에 대해 더 배우고 싶으면 quirksmode.org에 있는 A Tale of Two Viewports 보라.

출처 https://developer.mozilla.org/ko/docs/Mozilla/Mobile/Viewport_meta_tag

설정방법

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">

설정 사항

meta name="viewport" : 뷰포트 선언 content="width=device-width" : 콘텐츠를 표현할 넓이 ('디바이스 크기에 맞추겠다' 고 선언) intial-scale=1 : 초기 크기 설정(기본 꽉찬 화면) minimum-scale=1 : 최소 크기 설정 (기본값 : 0.*25, 범위 : 0~10.0) maximum-scale=1 : 최대 크기 설정(최대 배율 범위 : 0~10.0) user-scalable=no : 사용자 단말의 확대기능 사용 유무 선언(yes/no)

유명 웹사이트들의 viewport 지정

- 모바일 네이버

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">

- 모바일 다음

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">

- 마이크로소프트

<meta name="viewport" content="initial-scale=1.0, width=device-width">

- ADOBE

<meta name="viewport" content="width=device-width">

- 애플

<meta name="viewport" content="width=1024">