Xenosium 모바일용 스킨 완성!

<!-- Stylesheets -->
<link rel="stylesheet" media="screen" type="text/css" href="./style.css"  /> <!--base -->
<link rel="stylesheet" title="mobile-ver" media="handheld, screen and (max-device-width: 800px)" type="text/css" href="./style_mobile.css"  />
<link rel="stylesheet" title="mobile-ver" media="only screen and (max-width: 480px)" type="text/css" href="./style_mobile.css"  />

<!-- iphone/android ldpi/hdpi -->
<link rel="stylesheet" title="mobile-ver" media="only screen and (-webkit-device-pixel-ratio: 0.75)" type="text/css" href="./style_mobile.css" />
<link rel="stylesheet" title="mobile-ver" media="only screen and (-webkit-min-device-pixel-ratio:1.5)" type="text/css" href="./style_hdpi.css"/>
<link rel="stylesheet" title="mobile-ver" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="./style_hdpi.css"/>

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

우선 공통적인 style.css을 출력한 후 max-device-width가 800px인 기기에 한해 style_mobile.css를 로딩합니다. 그리고 또한 일반적인 컴퓨터에서도 브라우저 폭이 480px 이하이면 좁은 폭에 최적화된 모바일용 스타일시트를 로딩하도록 지정해줍니다.

밑부분은 기기의 해상도에 따른 처리 부분인데, (다행히도) 아이폰과 안드로이드 모두 webkit기반 브라우저를 사용함으로 -webkit-device-pixel-ratio라는 속성을 이용해 아이폰 4와 hdpi(고해상도)안드로이드 기기를 분별할 수 있습니다. 픽셀비율이 0.75인 기기는 그냥 기본인 style_mobile.css를 출력하고 (저해상도 안드로이드 기기는 거의 본 적이 없습니다만), 비율이 1.5-2가 되는 고해상도 디스플레이를 채용한 기기의 경우 (아이폰4, 갤럭시 등) style_hdpi.css를 로딩합니다.

style_hdpi.css에는 style.css와 style_mobile.css안에 이미지 속성 (background-image)을 가진 모든 class와 id를 override합니다. 실 해상도가 두 배 되는 이미지를 가져다가 출력한 후 CSS로 사이즈를 두 배 줄이는 거지요. 고해상도 디스플레이는 웹 페이지를 출력할때 픽셀을 실제 화면의 픽셀 수가 아니라 기존 화면 픽셀을 기준으로 하기 때문에 (가령, 아이폰4의 가로 해상도는 960px이지만 웹페이지상에서는 50%인 480px로 인식) 이런 것이 가능합니다.

이미지 네이밍은 iOS와 비슷하게 고해상도(해상도2배)용은 @2x라는 이름을 붙여줬습니다. 기존에 만들어놨던 그래픽이 대부분 다 벡터 기반이라서 이미지 사이즈만 200%하면 되어서 이미지를 업컨버팅하는건 그리 어렵지 않았습니다.

이렇게 이미지를 만들고 나면 style_hdpi.css에서 해당되는 부분을 찾아서…

.submitbtn { 
	background-image: url('images/submitbtn@2x.png'); 
	background-size: 80px 90px; 
}

이런식으로 image소스만 바꿔치기해주고 background-size를 기존의 이미지 사이즈로 지정해주면 끝!

아 그리고 한가지 중요한 것은 meta viewport속성을 지정해주는 것인데, width=device-width를 지정해주지 않으면 안드로이드에서 기기 폭을 제대로 리포트하지 않아 모바일용 페이지가 나오지 않는듯 합니다. 그 뒤의 scale관련 값들은 초기 줌 값, 최대 줌인할수 있는 비율 등을 의미하지요. 모두 1.0으로 해놓으면 모바일용 페이지에서는 사용자가 줌 할 수 없게 고정하는 기능을 합니다.