반응형
지금 회사에서 개발중인 프로그램이 DB를 사용하고 있다보니 DB상태를 좀 더 편하게 확인하기 위해서 웹으로 여러 종류의 페이지를 만들어서 사용하고 있다. 그 중 일정 간격으로 리프레시를 하면서 데이터를 확인할 일이 있는데 그냥 모바일 웹으로 접속하다보니 크기도 약간 부족하고 리프레시가 될 때마다 깜박거리고 주소창이 다시 뜨는 문제가 발생했다.
Ajax를 이용해야 하나 생각하다가 그냥 웹앱 형태로 보면 편하겠다 싶어 그쪽으로 방향을 틀었다.
iOS 웹앱 형태로 웹페이지를 보는 방법은 아주 간단하다.
사용하려는 웹페이지의 <head> </head> 사이에 다음의 몇줄만 추가하면 된다.
<meta name="apple-mobile-web-app-capable" content="yes" >
<link rel="apple-touch-icon" href="icon.png">
<!-- ios에서 제공하는 아이콘 다듬기 기능 사용 안할 때 -->
<link rel="apple-touch-icon-precomposed" href="icon.png">
1번째 줄
iOS 기기에서 웹앱 형태로 보는 기능을 활성화한다. 사파리에서 '홈 화면에 추가' 기능을 사용해 즐겨찾기를 만들어놓고 그 아이콘을 통해 접속하면 주소창과 네비게이션 바가 표시되지 않고, 리프레시가 필요한 경우에도 화면이 깜박이지 않는다.
2번째 줄
'홈 화면에 추가' 기능을 사용할 때 자동으로 등록되는 아이콘이다. 적절히 설정해두면 진짜 어플처럼 사용할 수 있다.
4번째 줄
2번째 줄의 구문을 사용하면 정사각형의 아이콘 이미지를 설정해두어도 애플의 기준에 맞게 아이콘이 적당히 다듬어져 출력된다. 이 기능을 해제하는 부분이다. 즉 2번째 줄 구문이나 4번째 줄 구문 중 한가지만 사용하면 된다.
반응형
'프로그래밍 스터디 > 웹 관련' 카테고리의 다른 글
| 웹 페이지 캐싱 막기 (0) | 2017.02.14 |
|---|---|
| 미생체 웹폰트 적용하기 (0) | 2016.02.17 |
