그런데 이것만으로는 모든 브라우져에서 딱 맞는 페이지가 만들어지지 않는다.
오페라 미니에서 열어보니 아래처럼 좌우 스크롤이 생기고 viewport 메타태그로 의도했던 좌우 스크롤없이 딱 맞는 페이지로 보이지 않는다.
그럼 오페라 미니에서도 제대로 좌우 스크롤 안생기고 딱 맞는 사이즈로 맞추려면 어떻게 해야 할까?
아래처럼 DOCTYPE을 XHTML Mobile 로 지정해주면 된다.
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.wapforum.org/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
그런데 옴니아2나 기타 폰에서 오페라 브라우져를 이용해서 들어가면 폰을 세로로 세운 것을 기준으로 가로 사이즈가 다르다. 아이폰이 320픽셀이라면 옴니아2에서 오페라로 이용해보니 더 3/4 정도 사이즈로 표현이 되어 아이폰에서는 한 줄당 4개씩 보이는 것이 아래처럼 3개씩 보이는 정도의 사이즈로 보인다.
* 아이폰용으로만 만들면 사이즈와 브라우져가 통일되어 있으니 좋은데, 다른 브라우져를 맞추려면 이것도 만만찮은 일인 것 같다. 우선 오페라 미니는 http://www.opera.com/mini/demo/ 에서 시뮬레이터로 대략 돌려볼 수는 있다. 그리고 윈모바일에 IE Mobile에서도 확인하려면 윈모바일 에뮬레이터 등을 설치해서 확인해봐야 한다.
그리고 PC에서 IE6 맞추듯 아직 IE Mobile이 다른 모바일 브라우져들에 비해 좀 뒤쳐지는 경향이 있어 이것까지 맞추기는 어려울 듯 하고, 얼릉 모두 표준을 잘 지켜줬으면 하는 바램;;
모바일에서는 아무래도 작은 화면 속에 구성을 얼마나 잘하느냐가 관건인듯 하다.
댓글을 달아 주세요
좋은정보네요^^ 담아가요