모바일 웹페이지 웹표준 basic.html을 만들어보자.
| <!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" /> <title></title> </head> <body> </body> </html> |
- 모바일 홈페이지는 가급적 가로 스크롤을 보이지 않아야 한다.
- 그래서 DOCUTYPE에 XHTML mobile을 지정해주면 좋다.
- 하지만 m.naver.com은 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 을 사용한다.
- 그리고 특수 meta tag 'viewport'를 사용한다.
- viewport는 다음 링크에서 확인해보기 바란다.
http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
http://learnthemobileweb.com/2009/07/mobile-meta-tags/ - user-scalable=yes : zoom in/out 가능하게 할 것인지
- initial-scale=1.0 : 보이는 화면 크기 확대 비율
- <meta name="viewport" content="width=device-width,height=device-height,user-scalable=yes,initial-scale=1.0">
가로,세로 사이즈를 디바이스 가로,세로 사이즈로 정하고, 줌인기능을 활성화시켜주고, 화면확대는하지않는다.
- viewport는 다음 링크에서 확인해보기 바란다.
- Opera Mini Simulator (java 설치하여야 함)
http://www.opera.com/mini/demo/ - windows mobile phone을 위한 윈도모바일 에뮬레이터가 있는데?? 어디 있을까요?