Mobile 홈 화면 전체 화면 모드

Mobile 홈 화면 전체 화면 모드

웹 페이지를 홈 화면으로 추가하면 특정 Meta 태그를 통해 웹 브라우저의 상단의 주소 표시줄과 하단의 버튼 Bar를 없앨 수 있습니다. 
단 홈 화면에 추가한 후 홈 화면의 아이콘을 통해 접속 했을 경우에만 적용이 됩니다.

<meta name="apple-mobile-web-app-capable" content="yes">

 

네이버나 다음의 모바일웹사이트에 가보시면 주소창이 사라지는걸 확인할수 있습니다. 
아이폰과 안드로이드를 테스트한결과 둘다 사라집니다. 하지만 개인이 지식없이 만든 페이지의 대부분은 아이폰에서는 어떨지몰라도 안드로이드쪽에서는 100% 주소창이 남아있는 결과를 초래합니다. 
결국 주소창만큼 페이지가 아래로 밀리게되고 보여지는 부분은 9/10이 되겟죠. 
손으로 올려보면 주소창이 사라지지만 그건 근본적인 해결방안이 아닙니다.
위 사항은 자바스크립트문으로 간단하게 처리가 됩니다.

자바스크립트의 window.navigator.standalone의 결과값(true/false)으로 전체화면 모드 유무를 알 수 있습니다.
추가로 자바 스크립트로 웹 페이지에 접속시 자동으로 스크롤을 상단의 주소 표시줄만큼 내려 상단의 주소표시줄이 사라진 것 처럼 만들수 있습니다.

 

window.addEventListener("load",function(){ 
	setTimeout(scrollTo,0,0,1); 
},false);