[mobile] iPhone용 웹어플리케이션을 만들때 유용한 팁 > 팁앤테크

홈스크린 아이콘 지정하기

페이지 루트에 apple-touch-icon.png 라는 이름의 아이콘 이미지를 넣어놓으면 이 페이지를 홈스크린으로 만들때 아이콘으로 사용하게 됩니다. 이 때 시각효과는 자동으로 적용이 되는데 만일 자동으로 시각효과가 적용되지않게 하려면 apple-touch-icon-precomposed.png 라는 파일을 위의 파일 대신 넣어놓으시면 됩니다.

만일 아이콘의 이름을 다르게 하거나 경로를 바꾸고 싶다면 아래와 같이 link 태그를 이용할 수도 있습니다.

    <link rel="apple-touch-icon" href="파일명" />
    <link rel="apple-touch-icon-precomposed" href="파일명" />

icon의 사이즈는 iPhone의 경우 57X57 픽셀이며 iPad는 72X72 픽셀입니다.
로딩 이미지 넣기

홈 스크린에서 실행시에 페이지가 로딩될동안 어플리케이션 처럼 로딩 이미지를 보여줄 수 있습니다. 아래와 같은 link 태그를 이용하면 됩니다.

    <link rel="apple-touch-startup-image" href="loading.png" />

모바일 사파리 UI 없애기

아래의 태그를 해당 페이지의 헤더에 넣어두고 페이지를 홈 스크린으로 등록할 경우 모바일 사파리는 상단의 URL bar와 하단의 버튼이 있는 bar가 없어지고 풀 스크린으로 시작합니다.

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

최상단의 status bar는 없앨수는 없으나 단 아래와 같은 meta 태그를 이용하여 style을 변경할 수 있습니다.

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

이때 content 에는 default | black | black-translucent(반투명) 의 값을 사용할 수 있습니다.

그리고 페이지 내에서 풀스크린으로 실행중인지 확인하기 위해서는 자바스크립트의 window.navigator.standalone 값으로 확인할 수 있습니다. 이 값이 true 일 경우 풀스크린 실행중임을 나타내게 됩니다.
화면 확대/축소 설정

모 바일 사파리의 경우 큰 페이지(예를들면 네이버같은)의 경우 화면크기에 맞게 보이도록 자동으로 페이지를 축소해 버립니다. application의 경우에는 이런 방식이 불편하게 느껴질 수도 있는데요. 이럴때 확대/축소 비율등을 설정할 수 있는 meta 태그가 있습니다.

    <meta name="viewport" content="user-scalable=yes, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0, width=device-width" />

user-scalable 값은 사용자가 확대/축소를 할 수 있는지의 여부 이며 initial-scale은 초기 비율, minimum-scale과 maximum-scale은 최소/최대로 zoom 할 수 있는 비율입니다. width의 경우 페이지의 너비를 픽셀로 지정할 수 있으며 device-width로 지정할 경우에는 디바이스의 너비로 설정됩니다.
화면 회전 체크하기

아이폰의 경우 중력센서가 존재하기 때문에 기울기에 따라 웹브라우저가 자동으로 회전하게 됩니다. 이 때 가로 세로 비율이 달라 지기 때문에 페이지내에서 화면의 회전을 체크해야 할 필요가 있을때가 생기게 됩니다.

모바일 사파리 내에서는 window.orientation 이라는 자바스크립트 값을 가지고 화면의 회전을 알 수 있습니다.

window.orientation 프로퍼티는 다음과 같은 네가지의 값을 가집니다.

    * 0 : 세로 화면
    * -90 : 시계 방향으로 90도 회전
    * 90 : 반시계 반대 방향으로 90회전
    * 180 : 180도 회전

사용자가 기기를 회전하였을 때는 onorientationchange 라는 자바스크립트 이벤트가 발생하게 됩니다.

window.onorientationchange = function() {
  alert(window.orientation);
}

해당 이벤트에 위와 같이 function을 연결해서 정의된 동작을 수행하도록 할 수 있습니다.
전화걸기 / 문자 보내기

페이지 내에서 브라우져에서는 a 태그를 이용해 url 뿐 아니라 mail 을 보낼 수가 있습니다.

    <a href="mailto:[email protected]">메일 보내기</a>

모바일 사파리에서는 여기에 추가로 전화걸기와 문자보내기를 사용할 수 있습니다.

    <a href="tel:021234567">전화 걸기</a>
    <a href="sms:021234567">문자 보내기</a>

또 한 a 태그를 사용하지 않더라도 기본적으로 010-000-0000 등의 숫자로 된 전화번호 형식의 문자열은 자동으로 전화걸기로 링크됩니다. 하지만 이것이 오히려 불편한 경우가 있는데요 이럴때는 다음과 같은 meta 태그를 사용하여 자동으로 링크가 걸리지 않게 할 수 있습니다.

    <meta name = "format-detection" content = "telephone=no">

추천0