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

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>