PC와 mobile에서 다르게 출력하기 질문입니다.
본문
INDEX
<?php if($is_mobile){ ?>
<a href="#" class="back_to_top_mobile"><img class="buttonhover" src="/../../images/upbutton.png"></a>
<?php } else { ?>
<a href="#" class="back_to_top"><img class="buttonhover" src="/../../images/upbutton.png"></a>
<?php } ?>
JS
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back_to_top').fadeIn(duration);
} else {
jQuery('.back_to_top').fadeOut(duration);
}
});
jQuery('.back_to_top,.back_to_top_mobile').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
jQuery('.back_to_top,.back_to_top_mobile').on('mouseenter', function() {
$(this).find('img').attr('src','/../../images/upbuttonhover.png');
})
jQuery('.back_to_top,.back_to_top_mobile').on('mouseleave', function() {
$(this).find('img').attr('src','/../../images/upbutton.png');
})
CSS
.back_to_top{position:fixed;bottom:0;left:50%; margin-left:500px; margin-bottom:10px;}
.back_to_top img:hover{background-image:url(/../../images/upbuttonhover.png) left center}
.back_to_top_mobile{position:fixed;bottom:0; right:0; margin-bottom:10px;}
.back_to_top_mobile img:hover{background-image:url(/../../images/upbuttonhover.png) left center}
왜 적용이 안되는거죠?
PC는 적용이 되지만 모바일은 안되고 있습니다.
답변 2
$is_mobile 함수가 로그되는지부터 확인해보세요.
만약 로드되지 않는다면 글로벌로 땡겨서 쓰시구요
<?php global $is_mobile; ?>
와우 global 중요합니다.