살다

모바일웹을 위한 아이폰/아이패드/아이팟 터치 Tip 본문

Tip

모바일웹을 위한 아이폰/아이패드/아이팟 터치 Tip

텅스텐필름 2010. 10. 19. 10:06

[사파리 를 이용한 아이폰/아이패드/아이팟 터치 모바일웹 테스트 하기]

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>

반응형