1. css

<LINK rel=”stylesheet” type=”text/css” href="”iphone.css”" media=”only screen and (max-width: 480px)”></P>

<LINK rel=”stylesheet” type=”text/css” href="”desktop.css”" media=”screen and (min-width: 481px)”></P>

브라우저 사이즈에 따라서 각기 다른 css 설정을 보여주기 위한 방법이다.

아이폰 기준으로 가로 최대 해상도 480을 기준으로 하는데 이런 경우는 하나의 페이지로 웹과 모바일을 모두 할 경우이다.

실무에선 이것 보다는 m.naver.com, m.daum.net 과 같이 원래 사이트와는 완전히 분리된 별도의 사이트를 가지고 있다.

User Agent로 유저 환경을 체크해서 접속 환경에 맞는 사이트로 이동시키면 간단하다.(자바스크립트 또는 서버스크립트 처리)

2. 페이지 크기 제어

<META name=viewport content="user-scable= no, width=device-width"></P>

뷰포트 메타 태그는 모바일 사파리 이외의 브라우저에서는 무시된다.

페이지 내용을 아이폰 화면에 꽉 채워서 표시해준다. 이 태그가 없으면 너무 작아서 확대해서 봐야 한다.

3. Safari UI (URL Bar, Button Bar) 없애기/변경하기?

<META name=”apple-mobile-web-app-capable” content=”yes”></P>

? <META name=”apple-mobile-web-app-status-bar-style” content=”black”>??

* 홈스크린에 추가한 아이콘으로 실행했을때만 적용

??* 자동으로 URL Bar 아래로 스크롤 하는 방법?

window.addEventListener(‘load’, function() {?

    setTimeout(scrollTo, 0, 0, 1);?

}, false);

??* status-bar-style: default, black, black-translucent(반투명)??

* UI 없는 Fullscreen 모드인지 확인하기?

if (navigator.standalone) {?    alert(‘전체화면 실행중’);?}

4. 아이콘(57X57) 지정하기

<LINK rel=”apple-touch-icon” href="”apple-touch-icon.png”"></P>

?<LINK rel=”apple-touch-icon” href="”apple-touch-icon-precomposed.png”"></P>

5. Startup 이미지 지정하기

?<LINK rel=”apple-touch-startup-image” href="”/startup.png”">??

* Home 스크린에 추가한 경우에만 사용됨