본문
아이폰 사파리에서 아이폰 어플인양 돌아가는 페이지를 만들어보자~!
- 아이폰에서 사용중인 브라우저(모바일 사파리)는 Webkit엔진 기반의 브라우져 이다. 안드로이드 브라우저도 Webkit기반이므로 지금 포스팅 하는 내용은 안드로이드 개발시에도 유용하게 사용할 수 있다.
- meta정보로 페이지 사이즈를 조절하게 되는데 "viewport"를 이용하면 아이폰 사이즈에 딱맞는 페이지로 로드 된다.
<meta name="viewport" content="height=device-height; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> 모바일 사파리(아이폰)에서 어플처럼 아이콘 등록 할 수 있도록 처리 하는 방법이다.
<meta name="apple-mobile-web-app-capable" content="yes" />
스테이터스 바 없애는 방법이라고 하는데 안없어진다 (-_-;)
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> 사파리 브라우져의 특성상 주소창이 위에 항상 보이게 되는데 이걸 없앨 수는 없지만 페이지 로드시 스크롤 하는 방법으로 안보이게 처리 할 수 있다.
function hideURLbar(){
window.scrollTo(0, 1);
}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>
관련링크
- 이전글UIWebView, UIWebViewDelegate 11.05.26
- 다음글아이폰 html5 드로잉 소스 11.05.13
댓글목록
등록된 댓글이 없습니다.