IOS Safari minimal-ui 적용기

IOS Safari 브라우져에서 제공하는 minimal-ui 기능 ( 툴바가 쪼그라드는 기능 or 툴바 사라짐 기능 )을 사용하기 위해 몇가지 수정사항이 존재하였다.

경험을 토대로 설명하고자 한다.

- <meta name="viewport" content="minimal-ui"> minimal-ui 추가한다. 

- body { height: 100%; overflow: auto 혹은 scroll; }을 명시하여 body에서 스크롤이 가능하면 끝.

이때 주의해야할 점은 하의 div들 중 { overflow: auto, scroll; } 이 가능하면 해당 엘리멘트가 스크롤 되기 때문에 위 minimal-ui 기능이 동작하지 않는다.

즉, window.addEventListener('scroll', this.onScroll); 추가 시 해당 스크롤이 동작하면 된다.

위 두가지 조건이 만족하면 safari에서 툴바가 쪼그라드는걸 볼 수 있다.

참고

https://stackoverflow.com/questions/18793072/impossible-to-hide-navigation-bars-in-safari-ios-7-for-iphone-ipod-touch