html | 모바일 Webapp 개발

아이폰 사용자의 100만이 넘었고, 안드로이드 기반의 스마트폰의 출시 등 현재 웹 시장의 저변 시장이 크게 발전되고 확대되고 있습니다. 이는, 모바일의 인터넷 사용자가 증가하여, 해당 웹 사이트들의 대비가 필요하다라는 것 또한 의미합니다. 아이폰과 안드로이드에 기본적으로 설치되어 있는 브라우저는 Webkit 기반의 브라우저를 사용하기 때문에, HTML5의 지원과 CSS3의 지원이 가능합니다. 이 페이지에서는 모바일 웹 페이지를 만들 때 유용한 팀과 자료들을 공유합니다.

Webapp 홈 버튼 아이콘 추가

Title

1 <title>ugoon mobile webapp</title>

Icons

1 <link rel="apple-touch-icon" href="home.png" />

Precomposed Icons

1 <link rel="apple-touch-icon-precomposed" href="home.png" />

icon size : iPhone (57*57) / iPad (72*72)

Startup 이미지

1 <meta name="apple-touch-startup-image" href="startup.png" />

Startup image size : iPhone (320*460) / iPad (768*1004)

전체화면에서 실행하기

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

기본 줌과 제스쳐 막기

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

viewport 추가 설명 보기

팝업창 차단하기

1 *{ - webkit-touch-callout: none; }

복사막기

1 *{ - webkit-touch-select: none; }

2 .text { -webkit-user-select: text; }

폰트 크기 조정 막기

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

iPhone OS Version Check

01 function iPhoneOS(){

02 var version = navigator.userAgent.match('iPod')||navigator.userAgent.match('iPhone') ? 1.0 : false;

03 if(match = /iPhone OS (.*) like Mac OS X/ .exec(navigator.userAgent)){

04 version = parseInt(match[1].replace('_',''),10) / 100;

05 if(version < 1){

06 version *=10;

07 }

08 }

09 }

10 

11 if(version = iPhoneOS()){

12 alert('iPhone OS + version);

13 }else{

14 alert('This is not an iPhone);

15 }

출처 : iPhone Webapps 101: detecting essential information about your iPhone - rakaz

Running Full Screen or In Safari Check

1 if(navigator.standalone){

2 alert("running full screen");

3 }else{

4 alert("running in a browser");

5 }

출처 : iPhone Webapps 101: detecting essential information about your iPhone - rakaz

Orientation of the iPhone Check

01 function checkOrientation(){

02 switch (window.orientation){

03 case 0 :

04 alert('Orientation : Portrait');

05 break;

06 case 90 :

07 case -90 :

08 alert('Orientation : Landscape');

09 break;

10 }

11 }

12 

13 addEventListener("orientationchange", checkOrientation);

14 checkOrientation();

출처 : iPhone Webapps 101: detecting essential information about your iPhone - rakaz

Network Connection Check

1 function checkOnline(){

2 if(navigator.onLine){

3 alert('There is a network connection');

4 }else{

5 alert('There is a no network connection');

6 }

7 }

출처 : iPhone Webapps 101: detecting essential information about your iPhone - rakaz

Webapp Interrupted

01 (function(){

02 var timestamp = new Date().getTime();

03 

04 function checkResume(){

05 var current = new Date().getTime();

06 if(current - timestamp > 4000){

07 var event = document.createEvent("Events");

08 event.initEvent("resume", true, true);

09 document.dispatchEvent(event);

10 }

11 timestamp = current;

12 }

13 

14 window.setInterval(checkResume, 1000);

15 });

16 

17 addEventListener("resume", function(){

18 alert('Resuming this webapp');

19 

20 window.setTimeout(function(){

21 alert('Updating Information');

22 }, 4000);

23 });