살다
모바일웹을 위한 아이폰/아이패드/아이팟 터치 Tip 본문
[사파리 를 이용한 아이폰/아이패드/아이팟 터치 모바일웹 테스트 하기]
1.우선 사파리5 를 설치합니다. (http://www.apple.com/kr/safari/download/)
설치되어있다면 pass~
2. 설치한 사파리의 메뉴중 오른쪽 상단의 톱니바퀴 메뉴를 클릭 > 메뉴 중 기본설정을 클릭합니다.
3. 기본설정 > 고급탭 의 [메뉴 막대에서 개발자용 메뉴보기] 를 체크해줍니다.
4. 다시 사파리창으로 돌아와서 이번에는 페이지 모양의 아이콘을 클릭하면 개발자용 메뉴가 보이게 됩니다.
개발자용 > 사용자 에이전트 를 차례대로 선택하면
스샷에서 보이는것 처럼 여러가지 플랫폼으로 간단하게 전환이 가능합니다.
훌륭합니다.
단, 크기는 직접 손으로 조정해야한다는거 말고는 -_-;;(크기까지 해당 플랫폼과 맞게 딱 고정되었다면 좋겠다는!!)
5. 사파리깔기도 귀찮고, 이것마저도 귀찮다~면 그냥 다른 사람들이 만들어둔 사이트를 접속하는게 좋겠네요
- 아이폰 테스트 사이트
http://www.iphonetester.com/
http://www.testiphone.com/
- 아이패드용 테스트 사이트
http://www.ipadpeek.com/
6. 아니면 윈도우용 시뮬레이터를 설치해서 테스트~
이전 포스팅가기
[아이폰용 모바일웹 제작 팁]
1. HTML5 의 input 태그를 이용한 상황에 맞는 아이폰 자판 레이이웃 호출하기
<input type="text" />
<input type="search" />
<input type="tel" />
<input type="url" />
<input type="email" />
<input type="time" />
<input type="number" />
<input type="datetime" />
<input type="week" />
<input type="date" />
2. 툴바숨기기
<script type="text/javascript">
window.addEventListener("load",function(){
setTimeout(scrollTo,0,0,1);
},false);
</script>
3. 화면 회전시 폰트사이즈 고정
auto : 기본값, 화면회전후 비율에 맞게 폰트크기가 자동으로 조정됨.
none : 회전시에도 폰크기 고정.
n% : 폰트크기를 정한 크기로 변경.
html {
-webkit-text-size-adjust:none;
}
4. 모바일웹페이지를 가로 크기에 딱 맞추기
user-scalable=no : 사용자의 확대보기 허용 여부(no/yes)
initial-scale=1.0 : 페이지 로딩시 확대비율
maximum-scale=1.0 : 최대확대비율
minimum-scale=1.0 : 최소축소비율
width=device-width : 플랫폼 가로 크기에 맞춤, 수치를넣으면 그수치에 맞게 맞춰짐.
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
5. 회전에 따라 다른 css 적용하기
<script type="text/javascript">
function orient()
{
switch(window.orientation){
case 0: document.getElementById("orient_css").href = "css/iphone_portrait.css";
break;
case -90: document.getElementById("orient_css").href = "css/iphone_landscape.css";
break;
case 90: document.getElementById("orient_css").href = "css/iphone_landscape.css";
break;
}
}
window.onload = orient();
</script>
<body onorientationchange="orient();">
</body>
6. 기본 어플 호출하기
- 전화걸기 : <a href="tel:1588-2120 ">블루웹 고객센터</a>
- 문자보내기 : <a href="sms:010-0000-0000">문자보내기</a>
- 문자보내기실행 : <a href="sms:">문자보내기</a>
- 메일보내기실행 : <a href="mailto:">메일보내기</a>
- 메일보내기 : <a href="mailto:echos@blueweb.co.kr">메일보내기</a>
- 내용채워서 메일보내기 : <a href="mailto:echos@blueweb.co.kr?cc=echos@blueweb.co.kr&bcc=echos@blueweb.co.kr&subject=test subjct&body=test body"">메일보내기</a>
'Tip' 카테고리의 다른 글
| windows7 hosts 읽기전용 파일 수정 방법 (0) | 2010.11.19 |
|---|---|
| 모바일웹을 위한 아이폰/아이패드 시뮬레이터 (2) | 2010.10.08 |
| 모바일 접근 구분하여 페이지 이동 (0) | 2010.09.15 |
