jquery 반응형 화면 사이즈 새로 측정하기. 미디어쿼리 구간과 오차 없애기

반응형 페이지를 만들 때,

윈도우 사이즈가 변할 때마다 윈도우(또는 html, body) 너비를 새로 측정하여 집어넣게 된다.

그런데 이렇게 하니, 제이쿼리의 이벤트 발생 구간과 미디어쿼리의 효과 적용 구간이 15px정도 오차가 생기는 것을 발견했다.

(이렇게 되면 그 오차범위에 속하는 너비의 디바이스를 이용하면, css와 js의 효과가 서로 다른 구간의 것이 적용되므로 실패한 ux를 제공하게 될 수 있다!!!)

 

 

오차가 발생한 원인은 스크롤바의 너비였다.

 

미디어쿼리의 윈도우 너비는 스크롤바를 포함하여 측정되고,

제이쿼리에서 구한 윈도우(또는 html, body)의 width값은 스크롤바 너비를 제외하고 측정된다.

 

윈도우(또는 html, body)의 width값에 스크롤바 너비를 더하는것은 스크롤바의 너비는 디바이스 또는 브라우저마다 차이가 있으므로 어려움이 따른다.

 

대신 미디어쿼리의 윈도우 너비값과 같게 측정되는 값이 있는지 찾아보기로 했다.

그 결과,  $(window).outerWidth(); 값을 구했을 때, 미디어쿼리의 윈도우 너비 값과 같은 것을 확인했다.

var wOw = $(window).outerWidth(); //미디어쿼리 구간과 같음
var hOw = $('html').outerWidth(); //스크롤바를 제외한 너비
var bOw = $('body').outerWidth(); //스크롤바를 제외한 너비
var ww = $(window).width(); //스크롤바를 제외한 너비
var hw = $('html').width(); //스크롤바를 제외한 너비
var bw = $('body').width(); //스크롤바를 제외한 너비



$(window).resize(function(){
    wOw = $(window).outerWidth();
    hOw = $('html').outerWidth();
    bOw = $('body').outerWidth();
    ww = $(window).width();
    hw = $('html').width();
    bw = $('body').width();
    
    //console.log(wOw);
    //console.log(hOw);
    //console.log(bOw);
    //console.log(ww);
    //console.log(hw);
    //console.log(bw);
});

 

 

따라서, js에서 반응형으로 구간을 나눌 때는 $(window).outerWidth();값을 이용하는 것이 좋겠다.

//반응형 resize

var wOw = $(window).outerWidth();

$(window).resize(function(){
wOw = $(window).outerWidth(); 
//console.log(wOw);
});