KCP 창업 지원, 수수료 국내최저 2.9% 제공 이벤트!

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

그누보드5
영카트5
스터디
Q & A
제작의뢰
컨텐츠몰
부가서비스
소모임
커뮤니티
부가서비스
KCP 이벤트!
배너가 모바일에선 안보이게

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>
답변을 작성하시기 전에 로그인 해주세요.
전체 42,818
고마운 분의 도움으로 질문을 해결하셨다면, 채택을 눌러서 감사의 마음을 전하세요.
어떻게 질문해야 할지 모른다면 질문하는 방법을 읽어 보신후 질문해 보세요.
QA 내용 검색

회원로그인

진행중 포인트경매

  1. 참여43 회 시작20.10.16 07:30 종료20.10.22 19:41
  2. 참여18 회 시작20.10.15 12:15 종료20.10.22 12:15

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

© SIRSOFT