사이트 서핑하다 찾은 바람의 이야기 님 블로그 글 스크랩입니다.
아이폰용 웹 개발 가이드 설명입니다.
문제 발생시 삭제하도록 하겠습니다.
========================================================================================================
iPhone용Safari는 Viewport라는 개념을 가지고 있습니다 위 코드의 [property],[value]에 아래의 프로파티와 값을 설정합시다. *device-width은iPhone을 눕혔을 경우에도 320px, device-height은iPhone을세워서 들었을 경우에도480px이 됩니다. 아래와 같은 코드를 사용할 경우
기본 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
내용
단위,지정방법
기본값
허용범위
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（확대,축소불가）를 지정할 경우 글자를 입력할때 스크롤도 불가능해짐
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을 지정한 경우
- 초기값보충：viewport width = 0（viewport height = 0）（특별히 높이,넓이를 지정하지 않은 경우）
- 표시영역 산출：표시영역 = window크기 / initial-scale
- document크기：표시영역과contents와viewport의최대값
- 묘사：결정되어진 document크기,initial-scale로 묘사
- initial-scale을 지정하지 않은경우
- 초기값보충：viewport width = 980px, viewport height = 1091px（특별히 높이,넓이를 지정하지 않은 경우）
- document크기결정：contents와viewport의최대값
- 배율산출：document가window에 다 들어갈수 있도록 initial-scale를 계산（세로와 가로중 큰쪽의 initial-scale를 적용）
- 묘사：결정되어진 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 |
