배너가 모바일에선 안보이게
관련링크
본문
팁자료실에 올라와 있는 스크롤따라다니는 레이어배너 쓰고있는데
피씨에선 보이고
모바일에선 안보이게 하고 싶은데 어렵네요 ㅜㅜ 하는방법좀 알려주실수 있으실가요?
현재 영카트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;}
}
바쁘신데 죄송하지만 어느 경로 CSS 파일을 수정해야 하는지좀 알려주실수 있으실가요 ^^;;
제 경우에는 스크립트를 사용합니다.
$.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');
}
});
}
PC에서만 보여주고 싶을 경우 : desktop_only 클래스 추가
모바일에서만 보여주고 싶을 경우 : mobile_only 클래스 추가
※ 본 스크립트를 적용하시려면 'jquery-migrate.js'가 필요합니다.
_
※ 샘플
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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">
<title>제목</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.4.1/jquery-migrate.min.js"></script>
<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>
<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>
<body>
<article>
<p class="desktop_only">PC에서만<br />출력됩니다.</p>
<p class="mobile_only">모바일에서만<br />출력됩니다.</p>
</article>
</body>
</html>
어디에 넣어야 하는지 좀 알려주시면 안될가요? ^^;;
js 파일에다가 넣으면 될가요?
만약 모든 페이지에 적용하고 싶으시다면, 항상 불러오는 common.js 와 같은 곳에 넣어주시고 그게 아니시라면 해당 페이지의 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>
우와! 바쁘실텐데 자세히 알려주셔서 감사합니다 ㅜㅜ 감동이에요!!
방금 적용해봤는데 너무 작동이 잘돼요!!
진심으로 감사합니다~ 복많이많이 받으세요 ^___________^