[Unity] WebGL을 이동으로 시작할 때 전체 화면을 자동으로 설정하는 방법

이 글은 Unity Advent Carender 2021 17일째 투고입니다!
개요
본고는 Unity에서 웹GL을 선택하여 시작하고 스마트폰 등 모바일 환경에서 운행할 때 화면을 최대화하는 요점을 정리했다.
스마트폰, 특히 아이폰은 태그 표시줄과 주소 표시줄이 장애가 돼 예상보다 화면 크기가 작은 화면에서 빈번하게 작동한다.그럴 때 화면 크기가 자동으로 맞지 않으면 원래 생각했던 것과 다른 외관을 만들어 낸다.나는 이런 현상에 대한 대응 방법을 총결하였다.
상당히 투박한 실복을 하고 있어 자신의 비망록으로서의 의미가 강하다는 점 양해 부탁드립니다.
방법
WebGL로 작성된 Unity의 템플릿을 사용자 정의할 수 있습니다.
먼저 Unity의 설치 폴더를 열고 아래 계층으로 잠입합니다.

Unity\バージョン名\Editor\Data\PlaybackEngines\WebGLSupport\BuildTools\WebGLTemplates

이 폴더 Default 를 원하는 곳으로 복사합니다.
이 폴더에는 기본 WebGL 템플릿이 있으므로 여기서 변형합니다.
그리고 좋아하는 편집기에서 엽니다TemplateData内のStyle.css.
Style.css의 앞 4줄을 삭제합니다. 아래와 같습니다.
Style.css

#unity-canvas { background: {{{ BACKGROUND_COLOR }}} }
.unity-mobile #unity-canvas { width: 100%; height: 100% }
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-logo { width: 154px; height: 130px; background: url('unity-logo-{{{ SPLASH_SCREEN_STYLE.toLowerCase() }}}.png') no-repeat center }
#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; background: url('progress-bar-empty-{{{ SPLASH_SCREEN_STYLE.toLowerCase() }}}.png') no-repeat center }
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-{{{ SPLASH_SCREEN_STYLE.toLowerCase() }}}.png') no-repeat center }
#unity-footer { position: relative }
.unity-mobile #unity-footer { display: none }
#unity-webgl-logo { float:left; width: 204px; height: 38px; background: url('webgl-logo.png') no-repeat center }
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
#unity-fullscreen-button { float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center }
#unity-mobile-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }

다음에 필요한 항목을 추가합니다.
어디든지 가능하기 때문에 아래 코드를 추가합니다.(모르는 경우 마지막 행을 행으로 바꾸어 아래에 추가합니다.)
Style.css

html,body,div { margin: 0; padding: 0; width: 100%; height: 100%;}
canvas { margin: 0 0 0 0; position: absolute; z-index: 9; width: 100%; height: 100%;}

지금까지 스타일입니다.css의 재작성이 끝났습니다.
이어 Default 폴더와 별도로 Template Data라는 새 폴더를 만듭니다.Default 폴더를 넣고 Default 폴더의 이름을 원하는 이름으로 변경합니다.여기서는 Custom으로 변경됩니다.
수정한 후 각 폴더의 Unity Project 태그로 드래그합니다.
마지막은 Unity 작업입니다.
BuildSettings에서 왼쪽 아래 PlayerSettings를 선택합니다.

Resolution and Presentation 내의 WebGLIMplate에서 원하는 이름의 템플릿을 선택합니다(이곳은 Custom).
설정은 여기서 끝!
PlayerSetting을 닫고 구축해 보세요!