<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>웹앱페이지</title>
<!-- 디바이스 가로크기에 맞춤 사용자가 확대축소 못함 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" />
<!-- 상태바 색상 black, gray -->
<meta name ="apple-mobile-web-app-status-bar-style" content = "black-translucent" />
<!-- 웹앱으로 사용 -->
<meta name ="apple-mobile-web-app-capable" content = "yes" />
<!-- 웹앱용 아이콘 경로 설정 -->
<link rel="apple-touch-icon-precomposed" href="app_icon.png" />
<!-- 주소창 가려주는 코드 -->
<script type="text/javascript" language="javascript">
window.addEventListener('load', function(){
setTimeout(scrollTo, 0, 0, 1);
}, false);
</script>
</head>
다음 코드를 작성해 주면 웹앱처럼 동작합니다.
그리고 주소창을 가려주는 코드를 사용하면 화면을 넓게 보이게 해 주죠.
주소창 자체를 없애주지는 않구요.
도큐먼트가 시작되는 위치로 상태바 바로 아래에 문서를 놓는 것입니다.
'WEB_TECH > 모바일웹' 카테고리의 다른 글
| 사이트의 모바일 친화성을 알려면 어떻게 해야 할까요. (0) | 2015.06.04 |
|---|---|
| 모바일 웹 기본페이지 (2) | 2013.06.25 |
| 모바일웹 브라우저 주소창 감주기 (0) | 2013.06.25 |
| 모바일웹 meta 태그를 사용한 페이지 크기 제어 (0) | 2013.06.25 |
| 미디어쿼리 이미지를 기기별로 다르게 크기를 교체해서 보여주기 (0) | 2013.04.26 |