Hello, World!
이전 목록 다음
채택완료

배너가 모바일에선 안보이게

쌍쌍란
프로필 보기이 회원 글보기이 회원의 댓글보기
 5년 전 4,218

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'); } // 배너 ?>

 

이렇게 바꿧는데 아예 사라져 버리더라구요

그누보드5
|

답변 2개 / 댓글 4개

채택된 답변
+20 포인트
조조나단입니다
프로필 보기이 회원 글보기이 회원의 댓글보기
 5년 전

반응형으로 사용하고 계시다면 

is_mobile() 함수는 안먹힙니다. (프로그램은 PC버전을 사용하고 있다고 생각하고 있기때문입니다)

 

css에서 미디어쿼리를 사용하여  모바일환경에서는 안보이게 하시면 됩니다

 

@media all and (max-width:850px){ /*화면의 너비가 850픽셀 이하인경우*/

#floatL{display : none;}

#floatR{display: none;}

}

답변에 대한 댓글 1개

쌍란
프로필 보기이 회원 글보기이 회원의 댓글보기
 5년 전
바쁘신데 죄송하지만 어느 경로 CSS 파일을 수정해야 하는지좀 알려주실수 있으실가요 ^^;;
델델피이니
프로필 보기이 회원 글보기이 회원의 댓글보기
 5년 전

제 경우에는 스크립트를 사용합니다.

Copy 
$.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'가 필요합니다.

 

_

※ 샘플

Copy 
<!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>

답변에 대한 댓글 3개

쌍란
프로필 보기이 회원 글보기이 회원의 댓글보기
 5년 전
어디에 넣어야 하는지 좀 알려주시면 안될가요? ^^;;
js 파일에다가 넣으면 될가요?
델피이니
프로필 보기이 회원 글보기이 회원의 댓글보기
 5년 전
만약 모든 페이지에 적용하고 싶으시다면, 항상 불러오는 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>
쌍란
프로필 보기이 회원 글보기이 회원의 댓글보기
 5년 전
우와! 바쁘실텐데 자세히 알려주셔서 감사합니다 ㅜㅜ 감동이에요!!
방금 적용해봤는데 너무 작동이 잘돼요!!
진심으로 감사합니다~ 복많이많이 받으세요 ^___________^

답변을 작성하려면 로그인이 필요합니다.