아이폰 웹페이지 만들기-해상도 지정

출처:http://yangc.com/blog/253

아이폰 사파리를 실행해서 웹사이트를 방문하면 기본적으로 980x1090px의 해상도로 웹서핑을 합니다.

하지만 아이폰의 하드웨어 해상도는  가로가 320px입니다.

웹사이트를 방문했을 때 아이폰이 320px을 최대해상도로 설정하도록 하는 방법입니다.(설명이 좀 난애하네요.)

사파리에서는 이 보이는 영역을 'Viewport'라고 정의합니다.

html상단에 아래 메타태그를 적용하면 원하는 해상도의 Viewport를  지정할 수 있습니다.

 

<meta name = "viewport" content = "initial-scale = 1.0">
: 스케일이 1이면 가로320px에 맞춰집니다. 즉 웹사이트 중 가로 320px영역이 아이폰에서 전체화면으로 채워져서 보여집니다.

이미지출처: Safari Dev Center: Safari Web Content Guide[바로가기]

 

<meta name = "viewport" content = "width = 980">
: 가로사이즈를 지정하면 해당 사이즈만큼 아이폰에서 보여집니다.

이미지출처: Safari Dev Center: Safari Web Content Guide[바로가기]

 

 <meta name = "viewport" content = "initial-scale = 1.5">

이미지출처: Safari Dev Center: Safari Web Content Guide[바로가기]

 

뷰포트 매타태그만 잘 사용해도 해상도에 맞는 이쁜 아이폰용 모바일 웹사이트를 만들 수 있습니다.