[WebGL] 전체화면 구동 (모바일 포함)

1. 템플릿 변경

• 유니티 플레이어 세팅 -> Resolution and Presentation -> PWA 선택

2. 빌드 후 index.html 수정

• head 태그 내용 변경
• 핵심은 apple-mobile.... 부분과 viewport 부분이다.

<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="viewport-fit=cover, user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<title>Unity WebGL Player </title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
<link rel="manifest" href="manifest.webmanifest">

 

• 참고로, 커스텀 템플릿을 설정하면 매번 변경하지 않아도 된다.
  • Unity 프로젝트 -> Asset -> WebGLTemplates 폴더 생성
  • Unity 설치폴더 -> PlaybackEngines -> WebGLSupport -> BuildTools -> WebGLTemplates -> PWA 폴더 복사
  • 위에서 생성한 WebGLTemplates 폴더에 붙여넣기 후 이름 변경 (예 : CustomPWA)
  • 플레이어 세팅 -> Resolution and Presentation 에서 추가한 템플릿 선택이 가능하다. 

3.  index.html 의 javascript 부분 변경

if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)){
...
}

위의 코드 모두 삭제

 

4. 유의점

• 아이폰의 경우 그나마 잘 되는 편인데, 아이패드는 상단 주소창이 사라지지 않는다. 
• 아이폰의 경우도 주소창이 사라지지 않는 경우가 꽤 있다.
• 이는 사파리 및 기기 특성이며, 사파리 -> 내보내기 -> 홈 화면에 추가 후 앱처럼 바탕화면에 있는 항목을 선택하여 
  실행하면 전체화면으로 실행이 된다.