모바일 웹뷰 앱처럼 구현하기
- 전체화면 모드 (홈 화면에 추가하여 확인)
- 홈아이콘
- 상태바 컬러 설정
- 오버 스크롤 막기
홈아이콘 설정
<!-- home icon -->
<link rel="apple-touch-icon" href="icon/touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="icon/touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="icon/touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="icon/touch-icon-ipad-retina.png">
<!-- start image-->
<link rel="apple-touch-startup-image" ref="icon/startup_screen-1024x748.png">
<!-- safari btn & adress hideen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- status-bar COLOR -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- black-translucent -->
<!-- 전화걸기 방지 -->
<meta name="format-detection" content="telephone=no" />over scroll prevent
safari 오버 스크롤 터치 막기
방법 1
<!-- Webapp Transition hotfix -->
<script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script>방법 2
단순 터치 막기 - 스크롤 컨텐츠가 없을 경우
// Disable scroll
function disableScroll(){
$('#wrapper').on('scroll touchmove mousewheel', function(e){
e.preventDefault();
e.stopPropagation();
return false;
});
}
// Enable scroll
function enableScroll(){
$('#wrapper').off('scroll touchmove mousewheel');
}방법 3
바디 최상단으로 스크롤 이동 방지 - 스크롤 값 만큼 잡아주기
function disableBodyScroll(){
if(!scrollLocation){
var elem = document.scrollingElement || document.body;
var elemSctop = elem.scrollTop;
$('body').css({
'position':'fixed',
'top': '-' + elemSctop + 'px',
});
}
}
function enableBodyScroll(){
if(!scrollLocation){
var bodyOffsetTop = $('body').offset().top;
$('body').css({
'position':'relative',
'top': '0px',
});
$('body, html').scrollTop(-bodyOffsetTop);
}
}