해상도에 따라 애드센스 보임 숨김 처리하기

반은형 테마가 아닐 때는 전혀 신경도 안쓰고 있다가.. 그전에 반응형 테마일 때도 신경은 안 쓰고 있었지만.. 오늘은 어째 테마를 바꾸고 갤럭시 넥서스로 접속해보니 애드센스 광고때문에 레이아웃이 틀어지는 게 유난히 신경이 쓰여서 jQuery 스크립트를 이용해서 해상도에 따라서 보이거나 숨기도록 해봤다. 특별한 것은 없고 컨텐츠가 표시되는 영역 div.entry의 넓이를 구해서 애드센스 사이즈와 비교해 display 속성을 block 또는 none으로 처리하는 것이다.

<script type="text/javascript">
jQuery(function() {
    contentAdjust();

    jQuery(window).resize(function() {
        contentAdjust();
    });
});

function contentAdjust()
{
    var entry_width = jQuery(".entry:first").width();

    jQuery(".entry p img").each(function() {
        var el = jQuery(this);
        var el_width = parseInt(el.attr("width"));

        if(el.data("width") == undefined)
            el.data("width", el_width);

        if(el.data("width") >= entry_width) {
            el.removeAttr("width").removeAttr("height").css("width", "100%");
        } else {
            el.css("width", "");
        }
    });

    if(entry_width < 300) {
        jQuery("#adsense-wrap").css("display", "none");
        jQuery("#adsense-left").css("display", "none");
        jQuery("#adsense-right").css("display", "none");
        jQuery("#adsense-bottom").css("display", "none");
    } else if(entry_width >= 300 && entry_width < 468) {
        jQuery("#adsense-wrap").css("display", "block");
        jQuery("#adsense-right").css("display", "none");
        jQuery("#adsense-bottom").css("display", "none");
    } else if(entry_width >= 468 && entry_width < 600) {
        jQuery("#adsense-wrap").css("display", "block");
        jQuery("#adsense-left").css("display", "block");
        jQuery("#adsense-right").css("display", "none");
        jQuery("#adsense-bottom").css("display", "block");
    } else if(entry_width >= 600) {
        jQuery("#adsense-wrap").css("display", "block");
        jQuery("#adsense-left").css("display", "block");
        jQuery("#adsense-right").css("display", "block");
        jQuery("#adsense-bottom").css("display", "block");
    }
}
</script>

아.. 그와 동시에 포스트 작성하면서 내용에 이미지를 첨부하게 되면 width와 height 속성이 들어가게 되는데 이것 때문에 반응형에서 이미지 사이즈가 변하지 않는 경우가 생겨서 entry 영역의 넓이가 이미지가 width 보다 작으면 width 와 height 속성을 제거하는 스크립트도 추가했다. 혹시 몰라서 이미지의 원래 width 값은 data를 이용해 저장해두도록 했는데.. 그 값을 뭔가에 이용하려고 저장을 한 건데.. 지금 생각해보니 어디다 쓰려고 한건지 모르겠다. ^^;