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

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

QA

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

본문

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;}

}

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


$.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>

만약 모든 페이지에 적용하고 싶으시다면, 항상 불러오는 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>

답변을 작성하시기 전에 로그인 해주세요.
전체 12
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT