배너가 모바일에선 안보이게 채택완료
https://sir.kr/g5_tip/2660">https://sir.kr/g5_tip/2660
팁자료실에 올라와 있는 스크롤따라다니는 레이어배너 쓰고있는데
피씨에선 보이고
모바일에선 안보이게 하고 싶은데 어렵네요 ㅜㅜ 하는방법좀 알려주실수 있으실가요?
현재 영카트5 반응형으로 쓰고 있으며
-----------------------------------------
변경전<?php @include_once(G5_PATH.'/banner_fly.php'); ?>
변경후<?php if(!is_mobile()) { include(G5_SHOP_SKIN_PATH.'/banner_fly.php'); } // 배너 ?>
이렇게 바꿧는데 아예 사라져 버리더라구요
답변 2개
반응형으로 사용하고 계시다면
is_mobile() 함수는 안먹힙니다. (프로그램은 PC버전을 사용하고 있다고 생각하고 있기때문입니다)
css에서 미디어쿼리를 사용하여 모바일환경에서는 안보이게 하시면 됩니다
@media all and (max-width:850px){ /*화면의 너비가 850픽셀 이하인경우*/
#floatL{display : none;}
#floatR{display: none;}
}
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
제 경우에는 스크립트를 사용합니다.
</p>
<p>$.browser.device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));
if($.browser.device){
$(document).ready(function(){
// -- Mobile 전용 스크립트 -- //
$('body').addClass('mobile');
$('.desktop_only').hide();
});
} else {
$(document).ready(function(){
// -- PC 전용 스크립트 -- //
$('body').addClass('desktop');
$('.mobile_only').hide();
var agent = navigator.userAgent.toLowerCase();
if((navigator.appName == 'Netscape' && agent.indexOf('trident') != -1) || (agent.indexOf("msie") != -1)) {
// -- Internet Explorer 전용 스크립트 -- //
$('body').addClass('msie');
}
});
}</p>
<p>
PC에서만 보여주고 싶을 경우 : desktop_only 클래스 추가
모바일에서만 보여주고 싶을 경우 : mobile_only 클래스 추가
※ 본 스크립트를 적용하시려면 'jquery-migrate.js'가 필요합니다.
_
※ 샘플
</p>
<p><!doctype html>
<html lang="ko">
<head></p>
<p><meta charset="utf-8">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="X-UA-Compatible" content="IE=edge"></p>
<p><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="HandheldFriendly" content="true">
<meta name="format-detection" content="telephone=no, address=no, email=no">
<meta name="referrer" content="always"></p>
<p><title>제목</title></p>
<p><script src="<a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>" target="_blank" rel="noopener noreferrer">https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script></a>
<script src="<a href="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.4.1/jquery-migrate.min.js"></script>" target="_blank" rel="noopener noreferrer">https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.4.1/jquery-migrate.min.js"></script></a>
<script>
$.browser.device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));
if($.browser.device){
$(document).ready(function(){
// -- Mobile 전용 스크립트 -- //
$('body').addClass('mobile');
$('.desktop_only').hide();
});
} else {
$(document).ready(function(){
// -- PC 전용 스크립트 -- //
$('body').addClass('desktop');
$('.mobile_only').hide();
var agent = navigator.userAgent.toLowerCase();
if((navigator.appName == 'Netscape' && agent.indexOf('trident') != -1) || (agent.indexOf("msie") != -1)) {
// -- Internet Explorer 전용 스크립트 -- //
$('body').addClass('msie');
}
});
}
</script></p>
<p><style>
article {
width: 95%;
max-width: 500px;
margin: 30px auto;
color: #656565;
font-size: 1.25em;
text-align: center;
background: #f3f3f3;
}
article p {
width: 100%;
height: 100%;
margin: 0;
padding: 200px 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
article .desktop_only {background: #4cc0e2;}
article .mobile_only {background: #4ce2a8;}
</style>
</head></p>
<p><body>
<article>
<p class="desktop_only">PC에서만
출력됩니다.</p>
<p class="mobile_only">모바일에서만
출력됩니다.</p>
</article>
</body>
</html></p>
<p>답변에 대한 댓글 3개
js 파일에다가 넣으면 될가요?
그리고 샘플코드 추가했으니 해당 샘플을 복사하셔서 html문서에 적용해보세요.
크롬과 같은 브라우저를 사용할 경우 F12를 누르시면 개발자 모드창이 뜨는데, 좌측 상단에서 두번째에 있는 네모가 두개 그려진 아이콘을 클릭하시면 모바일모드를 확인하실 수 있습니다. 모바일 모드에서는 F5를 눌러 새로고침해주세요.
그리고 위 댓글에도 설명을 드렸지만, 해당 스크립트 작동을 위해서
jquery-migrate.js가 필요합니다.
그누보드의 js폴더에 jquery-migrate-1.4.1.min.js파일이 있는지 체크해보시고 만약 해당 문서가 없다면 아래의 코드를 theme의 head.sub.php에 적용해주세요.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.4.1/jquery-migrate.min.js"></script>
방금 적용해봤는데 너무 작동이 잘돼요!!
진심으로 감사합니다~ 복많이많이 받으세요 ^___________^
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인