[Javascript] 특정 미디어에서만 함수 실행

보통 $(window).on("resize", function(){}); 과 if($(window).outerWidth() == "") {} 를 사용하여 특정 미디어의 조건을 사용하였었는데 이벤트나 함수를 실행할 경우 제대로 적용이 안되었었다.

따라서 자바스크립트만을 사용하여 아래와 같이 미디어 쿼리를 제어하여 함수 실행을 하였더니 안정적이게 작동이 되었다.

$(function(){
    function gnbMouseFunction(){
        $(".gnb-list__title").on("mouseenter", function(){
            $this = $(this);
            $(".gnb-list__title").removeClass("on");
            $(".depth2-page-frame").each(function(i,v){
                // $(".depth2-page-frame").stop().fadeOut();
                if($this.data("index") == $(v).data("num")){
                    if($(v).find(".depth2-page__list > li").length == 0) { // 2depth none
                        $(v).stop().fadeOut();
                        $("header").removeClass("header-on");
                        $("html, body").css({ overflowY: 'auto' });
                    } else { // 2depth there
                        if(!$this.hasClass("on")) {
                            $this.addClass("on");
                            $(v).stop().fadeIn();
                            $("header").addClass("header-on");
                            $("html, body").css({ overflowY: 'hidden' });
                        } else {
                            $this.removeClass("on");
                            $(v).stop().fadeOut();
                            $("header").removeClass("header-on");
                            $("html, body").css({ overflowY: 'auto' });
                        }
                    }
                } else {
                    $(v).stop().fadeOut();
                    // $("header").removeClass("header-on");
                }
            });
        });
        $('header, .depth2-page-frame').on("mouseleave", function(){
            $("header").removeClass("header-on");
            $(".gnb-list__title").removeClass("on");
            $("html, body").css({ overflowY: 'auto' });
            $(".depth2-page-frame").stop().fadeOut();
        });
    }
    // * ========== window size
    if(window.matchMedia("(min-width: 1249px)").matches) { // pc
        gnbMouseFunction();
    } else { // not pc
        console.log("size not pc");
    }
    // window size ==========
    // * ========== window resize
    if(window.matchMedia("(min-width: 1249px)").matches) { // pc
        $(".gnb-list-frame").show();
        gnbMouseFunction();
    } else { // not pc
        console.log("resize not pc");
        $(".gnb-list-frame, .gnb-page").hide();
    }
    // * window resize ==========
});

예시로는 pc에서만 특정 함수를 실행하고 그 외의 태블릿, 모바일에서는 실행하지 않으려 한다.

여기서 태블릿 사이즈는 pc의 inner-width 사이즈인 1200px+48px(좌우 여백 포함) = 1248px 이하로 잡았다.

따라서 window.matchMedia("(min-width: 1249px)").matches 안의 min-width값은 pc만 특정 함수를 실행할 것이므로, 태블릿 사이즈 1248px 초과인 1249px가 pc 사이즈가 된다.

 

정리해보면 

자바스크립트를 사용하여 미디어 쿼리를 제어하는 코드는,

window.matchMedia("(min-width: 1249px)").matches

이것이다.

 

참고 url : https://developer.mozilla.org/ko/docs/Web/API/Window/matchMedia

Window.matchMedia() - Web API | MDN

자바스크립트 이벤트 제거 함수 참고 url : https://developer.mozilla.org/ko/docs/Web/API/EventTarget/removeEventListener

EventTarget.removeEventListener() - Web API | MDN