모바일 웹 개발시 필수 및 유용한 소스코드 모음

출처 : http://blog.naver.com/injadark/220173477827

 

 

1. 페이지 사용자 설정

<meta name="viewport" content="width=device-width" />

<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no;"/>

 

- width=device-width 페이지를 자동으로 사용자 디바이스 사이즈에 맞춘다. 물론 별도의 수치값으로 고정 시킬수있슴.

- initial-scale=1.0  페이지가 로딩될때 확대비율을 정할수 있다. 값이 커질 수록 확대 비율된 모습으로 페이지가 나타난다

- maximum-scale=1.0 허용가능한 확대비율의 최대치를 설정한다

- user-scalable=0 사용자의 확대보기를 허용할지 여부를 설정한다. 값은 0(허용하지 않음), 1(확대보기 허용함) 입니다. (yes/no 도 가능)

 

 

2. 모바일 input 타입 키보드 설정

<input type="text" /> 모바일 키보드가 제공.

<input type="password" /> 모바일 키보드가 제공.

<input type="email" />  모바일 키보드 + @ / . 제공.

<input type="tel" /> 숫자 모바일 키보드가 제공.

<input type="url" /> 모바일 키보드 + / + . + .com 이 제공 .

<input type="search" />  숫자 모바일 키보드가 제공됩니다 go 부분이 Search로 변경.

<input autocapitalize="off"> 폼에서 첫 글자입력이 자동 대문자 막기 (아이폰 전용)

 

 

3. 대표링크

 - 전화걸기 : <a href="tel:0000-0000">고객센터</a>

 - 문자보내기 : <a href="sms:0000-0000">문자보내기</a>

 - 메일보내기 : <a href="mailto:메일주소">메일보내기</a>

 - 메일보내기 : <a href="mailto:echos@blueweb.co.kr">메일보내기</a>

4. 화면전환시 텍스트 크기 고정

<style type="text/css">

* {-webkit-text-size-adjust:none;} 

</style>

 

 

 

5. 모바일 디바이스기기로 웹사이트 접속시 자동으로 모바일 사이트로 접속하게 만들기 

 

// pc 웹페이지에 삽입되는 코드   <? $connect = '0'; extract(array_merge($HTTP_GET_VARS, $HTTP_POST_VARS)); ?> <script language='JavaScript'> //모바일 페이지로 이동.  var uAgent = navigator.userAgent.toLowerCase(); var mobilePhones = new Array('iphone','ipod','android','blackberry','windows ce', 'nokia','webos','opera mini','sonyericsson','opera mobi','iemobile'); for(var i=0;i<mobilePhones.length;i++){ if(uAgent.indexOf(mobilePhones[i]) != -1){ if(<?=$connect;?> == '0'){ document.location='모바일페이지 주소'; <? $connect = '0'; ?> } } } </script>

 

 

// 모바일 웹에 pc버전으로 돌아가는 버튼 달기   <script type="text/javascript" language="javascript"> function method(ob){ ob.submit(); } </script> <form action="index.php" method="post" name="lk"> <a href="javascript<x>:method(lk);">PC버전보기</a></x> <input type="hidden" name="connect" value="1"> </form>

 

 

 

6. 주소창 자동 다운 

 

// 소스   <script type="text/javascript" language = "javascript">  window.addEventListener('load', function() {     setTimeout(scrollTo, 0, 0, 1); }, false);  </script>

 

 

7. PC 에서 모바일 페이지 접속 막기

 

// 소스   <?  if ( !preg_match('/iPhone|iPad|Android|iPod|ipod|blackberry|opera mobile/',$_SERVER['HTTP_USER_AGENT']) ) {      echo '<br><br><br><center>이 페이지는 PC에서 접속하실 수 없습니다. </BR>모바일 기기 및 스마트폰으로 접속해 주세요.</CENTER>';      exit;  ?>