-
- head 태그내 meta태그 추가
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
- "width=device-width" 가 브라우저 폭을 디바이스의 폭과 맞춰준다.
- 스마트폰의 화면크기 알아내기(자바스크립트)
screen.width - 폰화면의 가로픽셀
screen.hieght - 폰화면의 세로픽셀
window.innerWidth - 브라우저 내부의 가로픽셀
window.innerHeight - 브라우저 내부의 세로픽셀
- 링크에 관하여
- 스마트폰 환경에서는 손가락으로 터치를 해야하기 때문에
글에 링크를 걸기보다는 글이 쓰여있는 테이블 자체에 onClick 이벤트로 링크를 거는게
클릭하기 좋다.
- 모바일 뷰어(시뮬레이터)
모바일 웹사이트를 만들면서 실제 모바일에서 어떻게 보여지는지 확인하기 위한 도구들.
- 파이어폭스 플러그인 - User Agent Switcher
플러그인을 설치하면 메뉴바의 [도구]항목에 아래와 같이 브라우저를 바꿀수 있는 버튼이 생긴다.
iPhone 3.0 을 선택하고 인터넷 사이트를 접속하면
웹사이트의 서버가 아이폰에서 접속한것으로 판단하게 된다.
iPhone 3.0 을 선택하고 www.horangi.kr 을 접속해본 화면
서버에서 스마트폰으로 접속한것으로 판단하고 모바일 페이지인
www.horangi.kr/m 으로 자동이동 했다.
무료버전이며 가끔씩 기부해달라는 페이지가 뜬다.....^^
- 오페라미니 시뮬레이터 - http://www.opera.com/mobile/demo/
JRE 가 설치되어 있어야 한다.
- 파이어폭스 모바일 PC버전 - http://www.mozilla.or.kr/ko/mobile/download/
설치과정없이 다운로드받은 zip화일의 압축을 풀고 fennec 폴더의 fennec.exe 화일을 실행하면 된다.
