'viewport'에 해당되는 글 3건

  1. 2010.11.30 뷰포트(VIEWPORT)
  2. 2010.10.26 iphone 메타 태그 관련
  3. 2010.07.05 iPhone Web 개발 ViewPort
web standard/mobile2010. 11. 30. 12:55

뷰포트(VIEWPORT)

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


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

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

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

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

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

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

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

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

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


뷰포트(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 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.

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 즉 확대/축소 없는, 본 크기 그대로를 지정하였다

'web standard > mobile' 카테고리의 다른 글

안드로이드 - dip -> pixel  (0) 2010.12.22
모바일웹사이트 제작시 고려사항  (0) 2010.12.02
css3 media 쿼리 예시(모바일웹)  (0) 2010.11.30
모바일 웹사이트 제작 전 알아두면 좋은 10가지  (0) 2010.10.26
iphone 메타 태그 관련  (0) 2010.10.26
Posted by 수라
web standard/mobile2010. 10. 26. 14:19

iphone 메타 태그 관련

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


viewport 를 지정하지 않으면 980px가 된다.


user-scalable=no/yes : 사용자가 확대 축소를 허가 할지 안할지를 정한다. 


 initial-scale=1.0 : 기본 확대 배율이다. 이것을 이용하여 살짝 큰 이미지의 기본확대배율을 0.75정도로 조절하여 사용할수있음


maximum-scale=1.0 최대 확대 배율이다. 얼마까지 배율을 증가시킬수 있을껀지 결정한다.

 

 minimum-scale=1.0 : 최소 확대 배율이다. 얼마까지 와이드? 시킬껀지를 결정한다



모바일 웹앱 개발자가 알면좋은 43가지 UX , UI
http://www.uxbooth.com/blog/essential-controls-for-web-applications/

'web standard > mobile' 카테고리의 다른 글

css3 media 쿼리 예시(모바일웹)  (0) 2010.11.30
모바일 웹사이트 제작 전 알아두면 좋은 10가지  (0) 2010.10.26
Web App 개발  (0) 2010.09.07
아이폰 웹 개발을 위한 프레임워크 여러가지 안내  (0) 2010.08.23
jQTouch – Mobile Web Apps with HTML, CSS and JavaScript  (0) 2010.08.20
Posted by 수라
web standard/mobile2010. 7. 5. 10:48

iPhone Web 개발 ViewPort


사이트 서핑하다 찾은 바람의 이야기 님 블로그 글 스크랩입니다.

아이폰용 웹 개발 가이드 설명입니다.

문제 발생시 삭제하도록 하겠습니다.


========================================================================================================


iPhone용Safari는 Viewport라는 개념을 가지고 있습니다
기본 Viewport의 넓이는 980px로 설정되어 있어서 780px의 웹페이지에서는 200px의 여백이 생기며가변 웹페이지의 경우에는 980px로 자동 설정 됩니다

iPhone의 실제 화면 사이즈는 세웠을경우 320x480px 눞힐경우 480x320px이므로 기본 980px으로 표시한 경우 PC의 1/3～1/2 정도의 크기로 축소되어 표시됩니다
그때문에 페이지를 처음 표시했을때는 글자가 작아서 읽을수 없다거나 하는 경우가 있습니다
iPhone용Safari에는 이 Viewport를 조작할수 있는 Meta Tag가 있습니다
지금부터 PC에서 접속에는 영향을 주지않고 iPhone에서 보기 좋은 웹페이지를 만드는 방법을 알아 봅시다

Viewport의 설정방법

<html>

<head>

<meta name="viewport" content="[property]=[value](, [property]=[value])">


・・・

</head>

<body>

・・・

</body>

</html>

위 코드의 [property],[value]에 아래의 프로파티와 값을 설정합시다.

property value
내용 단위,지정방법 기본값 허용범위 ETC
width Viewport넓이 px 980px 200～10,000px 「device-width*」 를 값으로 지정 가능
height Viewport높이 px 넓이와 지정된 비율에 의해 계산된 값 200～10,000px 「device-height*」를 값으로 지정 가능
initial-scale 배율의 초기값 곱수로 지정
（예：120%의경우1.2）		 표시단위에서 계산되는 값 minimum-scale～maximum-scale
minimum-scale 배율의 최소값 곱수로 지정 0.25 0～10
maximum-scale 배율의 최대값 곱수로 지정 1.6 0～10
user-scalable 확대,축소의 가능여부 --（yes / no） yes -- no（확대,축소불가）를 지정할 경우 글자를 입력할때 스크롤도 불가능해짐

*device-width은iPhone을 눕혔을 경우에도 320px, device-height은iPhone을세워서 들었을 경우에도480px이 됩니다.

아래와 같은 코드를 사용할 경우
Viewport의 넓이가 iPhone의 디스플레이 사이즈로, 처음 표시할 배율은 1, 2배까지 확대 가능
이라는 의미가 된다!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">


용어 정리
viewport
Viewport의 메타 태그에서 지정한 값 또는 뒤에 Safari가 계산한 값. initial-scale/width/height의 3개.
contents(크기)
HTML에 설치한 contents의 크기
document（크기）
여백을 포함시킨 HTML전체의 크기. (윈도우보다도 클 경우는, 스크롤하여 보여기는 부분을 포함한 전체의 크기.)
window（크기）
iPhone용Safari에서contents를 표시 할 수 있는 영역.세로의 경우 320x356px、가로일 경우 480x208px。
표시 영역
iPhone용Safari에서 배율에 따라 컨텐츠를 표시할 수 있는 영역. 세로의 경우에 배율 1에서는 320x356px, 배율 2에서는 160x178px, 배율 0.5에서는 640x712px.

iPhone용Safari의 묘사 프로세스

현재, 실측한 예로부터 추측할 수 있는 iPhone용Safari의 묘사 프로세스를 아래와 같이 정리 할수 있습니다.
  • initial-scale을 지정한 경우
    1. 초기값보충：viewport width = 0（viewport height = 0）（특별히 높이,넓이를 지정하지 않은 경우）
    2. 표시영역 산출：표시영역 = window크기 / initial-scale
    3. document크기：표시영역과contents와viewport의최대값
    4. 묘사：결정되어진 document크기,initial-scale로 묘사
  • initial-scale을 지정하지 않은경우
    1. 초기값보충：viewport width = 980px, viewport height = 1091px（특별히 높이,넓이를 지정하지 않은 경우）
    2. document크기결정：contents와viewport의최대값
    3. 배율산출：document가window에 다 들어갈수 있도록 initial-scale를 계산（세로와 가로중 큰쪽의 initial-scale를 적용）
    4. 묘사：결정되어진 document크기,initial-scale로 묘사

주의점

  • contents보다 작은 viewport width/height를 설정하면 무시된다.
  • viewport에서 initial-scale을 설정하지 않고 width/height를 설정하면 전체화면이 표시된다.
  • viewport에서 initial-scale도 width/height도 설정하지 않으면 width=980px/height=1091px이 된다.
  • 표시영역과 contents의 크기가 일치하지 않을때 initial-scale를 설정하면, 의도하지 않은 layout가 발생한다.



================================================================================================


출처 : 바람의 이야기 블로그 http://windsaga.tistory.com/8

'web standard > mobile' 카테고리의 다른 글

모바일 웹사이트 제작 전 알아두면 좋은 10가지  (0) 2010.10.26
iphone 메타 태그 관련  (0) 2010.10.26
Web App 개발  (0) 2010.09.07
아이폰 웹 개발을 위한 프레임워크 여러가지 안내  (0) 2010.08.23
jQTouch – Mobile Web Apps with HTML, CSS and JavaScript  (0) 2010.08.20
Posted by 수라

티스토리툴바