아이폰 사파리에서 아이폰 어플인양 돌아가는 페이지를 만들어보자~!

1. 아이폰에서 사용중인 브라우저(모바일 사파리)는 Webkit엔진 기반의 브라우져 이다. 안드로이드 브라우저도 Webkit기반이므로 지금 포스팅 하는 내용은 안드로이드 개발시에도 유용하게 사용할 수 있다.
2. meta정보로 페이지 사이즈를 조절하게 되는데 "viewport"를 이용하면 아이폰 사이즈에 딱맞는 페이지로 로드 된다.

   <meta name="viewport" content="height=device-height; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

    

3. 모바일 사파리(아이폰)에서 어플처럼 아이콘 등록 할 수 있도록 처리 하는 방법이다.

   <meta name="apple-mobile-web-app-capable" content="yes" />

4. 스테이터스 바 없애는 방법이라고 하는데 안없어진다 (-_-;)

   <meta name="apple-mobile-web-app-status-bar-style" content="black" />

5. 사파리 브라우져의 특성상 주소창이 위에 항상 보이게 되는데 이걸 없앨 수는 없지만 페이지 로드시 스크롤 하는 방법으로 안보이게 처리 할 수 있다.

   function hideURLbar(){         window.scrollTo(0, 1);     }

6. PC에서는 마우스를 사용하고 아이폰에서는 터치를 사용하는 인터페이스 차이로 인해 이벤트가 전혀 다르게 동작하는 경우가 있다. 예를 들면 Drag & drop같은 이벤트의 경우 아이폰은 TouchStart, TouchMove, TouchEnd 이벤트를 이용하는데 이것은 아이폰 기본 기능에 페이지 드래그가 할당되어있기때문에 드래그 되지 않도록 막아야 HTML Dom Object 드래그가 가능해진다. 아래와 같이 이벤트를 막자!

   <script type="text/javascript">   function touchHandler(event)  {      var touches = event.changedTouches,          first = touches[0],          type = "";                    switch(event.type)      {          case "touchstart":              type = "mousedown";              break;                       case "touchmove":              type="mousemove";                     event.preventDefault();              break;                              case "touchend":              type="mouseup";              break;                       default:              return;      }                var simulatedEvent = document.createEvent("MouseEvent");                     simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,                                    false, false, false, false, 0/*left*/, null);                                                                                   first.target.dispatchEvent(simulatedEvent);        }    function init()  {      document.addEventListener("touchstart", touchHandler, false);      document.addEventListener("touchmove", touchHandler, false);      document.addEventListener("touchend", touchHandler, false);      document.addEventListener("touchcancel", touchHandler, false);     }   document.body.onload = init; </script>

HTML :

<a class="btn">Touch button</a>



CSS :


JS(jQuery) :

아이폰(iphone) safari 웹개발 기본 팁

1. -webkit-text-size-adjust

1. <input type='text' /> 기본 텍스트 타입 입니다.

따로 변경된 부분은 없는 일반 적인 키보드 레이아웃이며 Form 요소로서 return 부분의 Text만 Go 로 변경됬습니다.

Geolocation 객체는 모바일 사파리에서 위치 정보를 담고 있는 오브젝트로 OS3.0 이상에서 사용가능하며.
좌표체게는 위도와 경도를 이용하는 WGS84 좌표계를 쓰고 있다.

"위치 정보는 확률적 추정에 의한 것으로 정확성을 보장하지 않는다"(FF3.5 위치정보 도움말)

<script type="text/javascript">
   /* Mobile Browser UA 체크 */
   var ua = navigator.userAgent.toLowerCase();
    browser = {
                skt : /msie/.test( ua ) && /nate/.test( ua ),
                lgt : /msie/.test( ua ) && /([010|011|016|017|018|019]{3}\d{3,4}\d{4}$)/.test( ua ),
                opera : /opera/.test( ua ) || /opera mobi/.test( ua ),
                ipod : /webkit/.test( ua ) && /\(ipod/.test( ua ) ,
                iphone : /webkit/.test( ua ) && (/\(iphone/.test( ua ) || /\(device/.test( ua )),
                android : /webkit/.test( ua ) && /android/.test( ua )
    }

  /* OS version 체크 */
<PRE class=code-javascript>var version = (function(){
var retObj = {}
if(browser.ipod || browser.iphone){
var pattern = /(iphone|ipod)+\s+os+\s+(\d)_(\d)(?:_(\d))?/igm
var result = pattern.exec(ua);

if(result != null && result.length > 0){
retObj.versionFull = result[0];
retObj.os = result[1];
retObj.major = result[2];
retObj.minor = result[3];
retObj.build = result[4] ? result[4] : 0;
}
}

return retObj;
})()</PRE>

// 3.1.2 에서는 Geolocation이 제대로 동작하지 않음.
if((browser.ipod || browser.iphone) && (version.major > 2 &&  version.build < 2)){
    navigator.geolocation.getCurrentPosition(foundLoc);
}

function foundLoc(position){
  var latitude = position.coords.latitude;
  var longitude = position.coords.longitude;
  alert("위도 : "+latitude +" , 경도 : "+longitude )
}

</script> 

 

16.기울기에 따라 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>
 </html>

17.툴바 숨기기

사파리브라우저의 주소입력창과 검색창이 있는 툴바를 보이지 않는 상태로 변환합니다.
툴바가 사라지는 것이 아니라 스크립트를 통하여 스크롤을 아래로 내려 툴바 바로 아래에서부터 웹페이지가 보여질수 있도록 하는것입니다.
이 스크립트를 사용하는 경우 사용자에게 최초로 페이지를 보여줄때 툴바가 차지했던 부분까지 화면공간을 확보하여 보여줄 수 있습니다.

 <script type="text/javascript">

   window.addEventListener('load', function(){
   setTimeout(scrollTo, 0, 0, 1);

   }, false);