[모바일 웹] 아이폰 전용 추가 기능

1 . 주소 창 숨기기.

 아이폰 네이티브앱과 같이 전체화면을 사용하는 것과 같이 주소표시줄을 완전히 숨기도록 처리할 수 있다. 이를 설정하기 위해서는 <meta>태그를 추가해주면 된다.

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

(**이는 iOS에만 적용이 된다.)

2 . 상태바 색상 변경.

iOS 네이티브앱과 같이 상태바의 색상을 회색(default), 검정(black), 반투명 검정(black-translucent)으로 변경 할 수 있다. 이 기능 또한 <mete>태그로 설정이 가능하다. 그리고 “apple-mobile-web-app-capable” 이름을 같은 메타태그가 지정이 되어 있어야 만이 적용된다.

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

 

3. iOS 런치(Launch) 이미지 설정.

iOS 앱 개발할 때 XCode에서 런치이미지를 등록하는 것과 마찬가지로 <link>태그를 이용하여 같은 효과를 줄 수 있다. 이는 “apple-touch-startup-image” 속성을 이용해서 지정하면 된다.

<link rel=”apple-touch-startup-image” href=”/이미지경로/startup.png” />

Startup 이미지는 iOS 해상도 별로 따로 지정해 줄 수도 있다.

<!--iPhone splash screen --> <link rel=”apple-touch-startup-image” href=”/이미지경로/startup320x460.png” media=”(device-width:320px)” />   <!--iPhone (Retina) splash screen --> <link rel=”apple-touch-startup-image” href=”/이미지경로/startup640x920.png” media=”(device-width:320px) and (-webkit-device-pixel-ratio: 2)” />   <!--iPad (portrait) splash screen --> <link rel=”apple-touch-startup-image” href=”/이미지경로/startup768x1004.png” media=”(device-width:768px) and (orientation: portrait)” />   <!--iPad (landscape) splash screen --> <link rel=”apple-touch-startup-image” href=”/이미지경로/startup748x1024.png” media=”(device-width:768px) and (orientation: landscape)” />   <!--iPad (Retina , portrait) splash screen --> <link rel=”apple-touch-startup-image” href=”/이미지경로/startup1536x2008.png” media=”(device-width:1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)” />   <!--iPad (Retina , landscape) splash screen --> <link rel=”apple-touch-startup-image” href=”/이미지경로/startup1496x2048.png” media=”(device-width:1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)” />

 

**1,2,3은 URL직접 입력이 아닌 홈 화면에 등록된 바로가기 아이콘을 터치해서 실행된 경우에만 적용이 된다.