html - viewport

Development/HTML 2012. 5. 28. 18:48


[html5] viewport 지정하기


1. viewport 란 무엇인가?

스마프트폰은 기종별로 화면 크기가 다르다. 그렇다고 모든 단말기에 맞추어서 전용 버전을 개발해야 하는 것은 아니다. 

화면 사이즈에 맞추어서 표시해주는 'ViewPort' 라는 기능을 이용하면 된다.

<meta> 태그로 ViewPort를 지정하면 자동으로 크기가 조절되는 기능이다.


<%--

  - Description : ViewPort 지정하기

  --%>

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1.0,maximum-scale=3.0" />

<title>ViewPort 지정하기</title>

<style>

article, aside, figure, footer, header, hgroup, memu, nav, section { display: block; }

p { font-size: 12px; }

</style>

</head>

<body>

<p>오늘은 맑음</p>

<p>오늘은 참 즐거운 날이었다.</p>

</body>

</html>





2. viewport 사용법

표시 화면의 크기, 확대/축소 허용, 초기 표시 배율을 <meta> 태그에서 지정 할 수 있다.

<meta name="viewport" content="속성1=값1, 속성2=값2,..." />


VIewPort 속성

 속성

기능 

 width

 너비(픽셀)

 height

 높이(픽셀) 

 initial-scale 초기 배율(기본 꽉 찬 화면) 

 minimum-scale

 최소 배율(기본값: 0.25, 범위:0~10.0)

 maximum-scale

 최대 배율(범위:0~10.0) 

 user-scalable

 확대/축소 여부 (yes/no)




[html5] viewport 지정하기


출처 - http://nimba.tistory.com/289





얼마전 참석했던 세미나에서 뷰포트(Viewport)에 대한 언급이 잠시 있었다

모바일 웹 UI 개발시 Display 영역 조절과 관련된 기술요소인듯 하였고 자세한 설명보다는
뷰포트 메타태그 기술방식 위주의 설명이여서 완전한 개념을 파악하기는 힘들었다

뷰포트에 간략히 조사해 보았다

뷰포트가 사파리 기술?
뷰포트를 조사하다 처음 든 의문은, 이것이 애플의 (모바일) 사파리 기술인가? 하는 것이었다

대부분의 인터넷 블로그에서 뷰포트를 소개하면서 아이폰 기반 모바일 웹을 대상으로 하였고
사파리 브라우저가 인식하는 메타태그로 설명하고 있었다

또 다른 자료에서는 아이폰과 안드로이드 심지어 오페라 모바일 등 다른 브라우저에서 권장하는
뷰포트 태그를 제시하기도 하였다

뭐지.. 이거? 뷰포트 태그가 모바일 사파리가 인식하는 개념처럼 하더니 다른 브라우저에서도 
인식되나보네? .. 하면서 살짝 의문이 들기 시작했다

짧은 시간 의문을 품다 문득  떠 오른 생각은 바로 웹킷(WebKit) 이었다
웹킷은 아이폰에 있는 모바일 사파리의 핵심 엔진이며 안드로이드의 브라우저 기반이기도 하다
더불어 웹킷은 다른 모바일 브라우저에서도 사용되고 있는 기술이다
웹킷과 뷰포트의 연결고리가 더 자연스럽다는 생각이 들었다

그렇다. 뷰포트 메타태그는 웹킷 기반의 모바일 브라우저에서 인식 가능한,
표시영역 제어와 관련된 기술요소 였던 것이다

2013.01.15: 위 내용 수정합니다. xCoda 님이 댓글로 안내 해 주셨습니다
아래 댓글 내용 확인 바랍니다.

* 댓글 내용
뷰포트 메타태그는 webkit의 기술이 아니고,
모바일 사파리에서 비표준으로 추가 하여 사용한것을
대부분의 모바일 브라우져에서 채택해서 사용하고 있는 속성입니다.
https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag



뷰포트(Viewport)란?
뷰포트라는 개념자체는 모바일 웹에 국한된 것은 아니다
DirectX 나 여타 그래픽, 디자인 관련 기술에 개념적으로 사용된 용어인 듯 하다
그러나 처음 나에게는 낯선 용어였다

뷰포트를 대략 정의하자면,
컴퓨터나 휴대 단말기 등 장치에 Display 요소가 표현되는 영역을 말한다
모바일 웹의 경우 아이폰 사파리 브라우저에서 웹 페이지가 표시되는 영역으로 해석할 수 있다

- 데스크탑 브라우저의 뷰포트와 모바일 브라우저의 뷰포트(출처: 사파리 웹컨텐츠 가이드)


왜 모바일 웹에서 뷰포트가 중요한가?
기존의 데스크탑 웹 개발 환경에서 뷰포트에 대한 개념이 이토록 난무(?)한 적이 있었던가?
요즘 모바일 웹 개발 관련 지식 자료에 반드시 등장하는 것 중 하나가 바로 뷰포트 이다
그럼... 왜 모바일 웹에서는 뷰포트가 중요해 졌을까?

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

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

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

아래 그림은 오페라 미니에서 mkexdev.net 을 브라우징한 모습니다
페이지의 가로 폭 모두가 표현되기는 했지만 배율 축소로 인해 글자및 이미지의 가독성은 많이 떨어진다



뷰포트 메타태그를 이용하면 모바일 브라우저의 뷰포트 크기나 배율등을 조정할 수 있어
모바일 웹에 최적의 상태로 화면이 표시되도록 설정할 수 있게 된다


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

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

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

아래 화면은 뷰포트를 설정하지 않은 것(왼쪽)과 device-width 로 설정한(오른쪽) 결과 화면이다


물론 현재 대상인 mkexdev.net은 모바일 웹을 전혀 고려되지 않은 사이트라 두 가지 모습 
모두 효율적으로 표시되지 않는 모습이다.
다만 뷰포트 메타태그를 이용해 웹 페이지의 화면 표시 배율을 조절할 수 있다는 것을 느끼면 된다

(참고로 뷰포트 메타태그를 지원하지 않는 브라우저에서는 이 설정은 모두 무시된다)

뷰포트 메타태그로 조절할 수 있는 것들
뷰포트 메타태그를 이용하면,
화면의 너비 뿐만 아니라 줌 레벨, 스케일링 가능 여부등이 설정을 조절할 수 있다

아래표는 뷰포트 매타태그의 속성표이다

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 andmaximum-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 setuser-scalable to no. Zooming by the user is also limited by the minimum-scale andmaximum-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.

Viewport properties (출처: 애플)


다음 두 애플의 자료에서 뷰포트에 대한 상세한 내용이 제공되고 있다
Configuring the Viewport
Supported Meta Tags 


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

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" />

어쩜 이렇게 모두 거의 동일할까?
이것이 최적의 구성인가... ㅎㅎ

가로 너비는 장치 너비를 지정하였으며 사용자에 의해 확대/축소가 되지 않도록 설정하고
초기 스케일은 1.0 즉 확대/축소 없는, 본 크기 그대로를 지정하였다


출처 - http://m.mkexdev.net/34

















저작자표시

'Development > HTML' 카테고리의 다른 글

HTML - select 디자인  (0) 2012.06.09
HTML - select  (0) 2012.06.09
html - defer, async 속성  (0) 2012.05.28
html - 이벤트에서 return 의미  (0) 2012.05.23
HTML - rel 속성  (0) 2012.05.15
Posted by linuxism
,

티스토리툴바