[스크랩] 안드로이드 크롬 브라우저 풀 스크린

안드로이드OS 기반의 터치스크린에 키오스크 화면을 만들게 됐다.
크롬 pc버전의 경우 f11을 누르면 전체화면이 간단하게 구현되지만 크롬 모바일버전의 경우는 f11의 기능이 없다.
그래서 검색을 해보니 구글 개발자 페이지에서 ‘전체화면경험구현’ 이라는 글로 몇가지 방법에 대해 제시하고 있다.
https://developers.google.com/web/fundamentals/native-hardware/fullscreen/?hl=ko

제시된 방법중에 ‘웹 앱 매니페스트’ 라는 방법을 이용했다.

사용 방법은 간단하다.
우선 페이지 헤더에 전체 화면 실행을 알리는 메타태그와 minifest.json 파일을 링크걸어준다.

1 2	<meta name="mobile-web-app-capable" content="yes"> <link rel="manifest" href="/manifest.json">

그리고 manifest.json파일을 아래처럼 작성해준다.
start_url 은 시작될페이지 주소로 해주고, display는 standalone을 해줘야 브라우저의 툴바가 사라진다.
short_name, name, icons는 각자의 사이트에 맞게 넣어준다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14

{   "short_name": "Kinlan's Amaze App",   "name": "Kinlan's Amazing Application ++",   "icons": [     {       "src": "launcher-icon-4x.png",       "sizes": "192x192",       "type": "image/png"     }   ],   "start_url": "/index.html",   "display": "standalone",   "orientation": "landscape" }

코드상 만들어줄 부분은 여기까지이다.
디바이스의 크롬 브라우저를 띄워 페이지에 접속한 후 설정에 ‘홈화면에 추가’ 를 누르면 홈 화면에 사이트에 바로 접속할 수 있는 아이콘이 만들어진다.

[출처] http://mcatcher3.cafe24.com/%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C-%EB%AA%A8%EB%B0%94%EC%9D%BC-%ED%81%AC%EB%A1%AC-fullsize%EA%B5%AC%ED%98%84/