[스터디] Viewport 관련 내용

뷰포트 Viewport

컴퓨터나 휴대 단말기 등 장치에 Display 요소가 표현되는 영역.
모바일 웹의 경우 브라우저에서 웹 페이지가 표시되는 영역.

이미지 출처 : http://m.mkexdev.net/34

현재 스마트폰 브라우저는 풀브라우징을 지원한다
풀브라우징은 모바일 환경에서도 데스크탑 환경처럼 웹화면 전체를 자연스럽게 브라우징 할 수 있는
환경을 일컫는다

작은 화면의 모바일 단말기에 웹 페이지 모두 표시하려다 보니 전체적인 페이지 배율 조정이 가해지게 
된다. 즉 화면에 맞도록 전체적으로 축소되어 화면 모두가 브라우징 되지만 페이지에 있는 컨텐츠들의
가독성은 상당히 떨어지게 되는 것이다

웹킷 기반 브라우저의 뷰포트 기본 가로 너비는 980 픽셀이다
그러나 아이폰 사파리브라우저의 가로 너비는 320 픽셀이다
이 말은 980 크기의 페이지를 320화면에 다 보이도록 전체적인 배율축소가 발생된다는 의미이다

뷰포트 메타태그
뷰포트의 설정을 변경하기 위해 메타태그 형태로 지원된다

아래의 메타태그는 가장 기본적인 형태로 뷰포트의 가로폭을 기본 값인 980픽셀이 아닌
모바일 단말기 장치의 가로 폭으로 설정하겠다는 의미이다(아이폰의 경우 320픽셀)
<meta name="viewport" content="width=device-width" />

이렇게 설정하면 뷰포트의 가로 너비와 단말기의 가로너비가 동일하기 때문에
페이지의 배율 조정이 일어나지 않고 320 너비 만큼만 브라우저에 표시된다
(물론 좌/우 스크롤 기능으로 모든 컨텐츠를 탐색할 수 는 있다)

viewport 설정 X                                            viewport 설정

이미지 출처 : http://m.mkexdev.net/34

Viewport Attribute

Property	Description
width	The width of the viewport in pixels. The default is 980. The range is from 200 to 10,000. You can also set this property to the constants described in “number.” Available on iPhone OS 1.0 and later.
height	The height of the viewport in pixels. The default is calculated based on the value of the width property and the aspect ratio of the device. The range is from 223 to 10,000 pixels. You can also set this property to the constants described in “number.” Available on iPhone OS 1.0 and later.
initial-scale	The initial scale of the viewport as a multiplier. The default is calculated to fit the webpage in the visible area. The range is determined by the minimum-scale and maximum-scale properties. You can set only the initial scale of the viewport—the scale of the viewport the first time the webpage is displayed. Thereafter, the user can zoom in and out unless you set user-scalable to no. Zooming by the user is also limited by the minimum-scale and maximum-scale properties. Available on iPhone OS 1.0 and later.
minimum-scale	Specifies the minimum scale value of the viewport. The default is 0.25. The range is from >0 to 10.0. Available on iPhone OS 1.0 and later.
maximum-scale	Specifies the maximum scale value of the viewport. The default is 1.6. The range is from >0 to 10.0. Available on iPhone OS 1.0 and later.
user-scalable	Determines whether or not the user can zoom in and out—whether or not the user can change the scale of the viewport. Set to yes to allow scaling and no to disallow scaling. The default is yes. Setting user-scalable to no also prevents a webpage from scrolling when entering text in an input field. Available on iPhone OS 1.0 and later.

뷰포트 설정 참고
포털 등 기 개발된 모바일 웹 사이트에서 설정한 뷰포트 태그를 참고해 보자

1) m.naver.com
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" />

2) m.daum.net
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />

3) m.nate.com
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />

4) m.yahoo.com
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

5) m.aladdin.co.kr
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />

참고 : http://m.mkexdev.net/34