아이폰 웹 코딩시 유의점

모바일 2010. 12. 16. 10:16

아이폰 웹페이지 이것만 알아도 유용하다.
<head></head>사이에 아래의 한줄을 집어넣어보자.

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />  

위의 한줄을 집어넣음으로써 아이폰의 해상도에 적절하게 화면이 표시될 것이다.
간단한 내용이지만 한부분씩 살펴보겠다.

width=device-width; 
이부분은 영문 그대로 웹페이지의 너비를 기기의 너비대로 보여주라는 얘기다.
아이폰은 320 x 480의 해상도를 갖고 있으므로 320px에 맞춰주는 역할을 한다.

initial-scale=1.0;
초기화면 로딩시 몇배로 보이게 할 것인가를 지정해주는 부분이다.
당연한 얘기지만 1.0으로 지정하면 1배로 보이게 된다.

maximum-scale=1.0;  1배 까지 확대가능. 즉, 확대 불가를 의미한다.
아이폰은 멀티터치를 이용해서 화면을 맘대로 키우거나 줄일 수 있다. 
그러나 때로는 웹사이트가 멀티터치로 화면크기 조절이 안되는걸 볼 수 있는데 
이는 바로 이 옵션이 1로 적용되었기 때문이다.

maximum-scale=10.0; 이렇게 지정하면 10배까지 확대가 가능해진다.

user-scalable=0; 이부분은 멀티터치를 확용한 확대를 허용할 것인가의 여부를
결정하는 부분이다. 위에서 maximum-scale의 숫자를 키우면 해당 숫자 배수까지
화면이 커질 수 있다고 설명했지만 user-scalable가 0으로 되어있으면 작동하지 않는다.

반대로 user-scalable가 1이 적용되어 확대조절을 허용하더라도 
maximum-scale이 1.0으로 되어있으면 화면 확대가 안된다.

 

아래에 예제 하나를 제시한다.

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=10.0; user-scalable=1;" /> 

 위의 예제의 설정은 웹페이지를

1) 아이폰 화면에 맞추며,
2) 처음 크기는 1배로,
3) 그러나 10배까지 키울 수 있다.


아이폰을 위한 웹페이지의 가장 기초적인 부분이지만, 응용해서 좋은 웹사이트를 제작하시길 바랍니다.


출처: http://misojium.com/435

: